gulp是趋势

gulp完全开发指南 => 快来换掉你的Grunt吧

gulp的工作流程:文件流--文件流--文件流......因为grunt操作会创建临时文件,会有频繁的IO操作,而gulp使用的是流操作,一直是在内存中处理,直到输出结果。 因此gulp在效率上确实远胜grunt,并且学习成本不高,在这非常感谢刘剑辛的分享!

一、 快速生成package.json

npm init //生成package.json

如图:

二、nmp安装参数中--save、--save-dev是什么

package.json 的dependencies , 一个放在devDependencies里面

{
"name": "gulpjs",
"version": "0.0.1",
"description": "Gul pcourse by link",
"main": "app.js",
"dependencies": {
"express": "^4.13.4",
"gulp-minify-css": "^1.2.3"
},
"devDependencies": {
"gulp": "^3.9.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "link",
"license": "ISC"
}

详细介绍:https://docs.npmjs.com/cli/install

三、常用插件

npm install --save-dev gulp  // 本地使用gulp
npm install --save gulp-imagemin // 压缩图片
npm install --save gulp-minify-css //压缩css
npm install --save gulp-ruby-sass //sass
npm install --save gulp-jshint //js代码检测
npm install --save gulp-uglify //js压缩
npm install --save gulp-concat //文件合并
npm install --save gulp-rename //文件重命名
npm install --save png-sprite //png合并
npm install --save gulp-htmlmin //压缩html
npm install --save gulp-clean // 清空文件夹
npm install --save browser-sync //文件修改浏览器自动刷新
npm install --save gulp-shell //执行shell命令
npm install --save gulp-ssh //操作远程机器
npm install --save run-sequence // task顺序执行

更多插件:https://www.npmjs.com/search?q=gulp

gulp插件的更多相关文章

  1. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  2. gulp 插件

    原文链接:http://www.mamicode.com/info-detail-517085.html gulp是什么? http://gulpjs.com/ 相信你会明白的! 与著名的构建工具gr ...

  3. gulp插件(gulp-jmbuild),用于WEB前端构建

    源码地址:https://github.com/jiamao/gulp-jmbuild https://github.com/jiamao/gulp-jmbuild gulp-jmbuild gulp ...

  4. gulp插件gulp-usemin简单使用

    关于什么是gulp,它和grunt有什么区别等问题,这里不做任何介绍.本文主要介绍如何使用gulp-usemin这款插件,同时也会简单介绍本文中用到的一些插件. 什么是gulp-usemin 用来将H ...

  5. 使用gulp插件来自动刷新页面。

    http://itakeo.com/blog/2016/05/19/gulpreload/?none=123 使用gulp插件来自动刷新页面.再也不用修改一次,按一下F5了. 首选通过npm inst ...

  6. 将less编译成css的gulp插件

    简介:gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码, ...

  7. 如何编写一个gulp插件

    很久以前,我们在"细说gulp"随笔中,以压缩JavaScript为例,详细地讲解了如何利用gulp来完成前端自动化. 再来短暂回顾下,当时除了借助gulp之外,我们还利用了第三方 ...

  8. Gulp 插件及其使用

    前端现在有很多的自动打包工具,各有优缺点,而gulp作为其中的一员,也有着很受人们的青睐,简单粗暴,然而gulp本身并没有提供很多的API,真正的一些工作则是靠着插件完成的,本文简单介绍一些常用的gu ...

  9. gulp插件构建项目 压缩js、css、image、zip、web服务、跨域等插件

    推荐一个很好文: https://github.com/lin-xin/blog/issues/2 匹配符 *.**.!.{} gulp.src('./js/*.js') // * 匹配js文件夹下所 ...

  10. Gulp插件笔记

    初次接触Gulp是出于网页模块化的需要,用过之后发现这个任务管理工具有很多实用的插件,意外地好用,于是打算写下这篇笔记把用到的Gulp插件记录一下.至于想了解Gulp基本用法的同学可以去Gulp官网查 ...

随机推荐

  1. .net中的多线程

    一.多线程的概念        什么是进程呢?当一个程序开始运行时,它就是一个进程,进程所指包括运行中的程序和程序所使用到的内存和系统资源.而一个进程又是由多个线程所组成的,线程是程序中的一个执行流, ...

  2. 使用 mina 传输大字节数组

    转载自:http://seara520.blog.163.com/blog/static/16812769820103214817781/ 使用mina传输超过2k以上的数据时(采用tcp方式,如果是 ...

  3. Java学习笔记——显示当前日期的三种方式

    一.Date类:这是一种过时的表达方式 import java.util.Date; Date date = new Date(); System.out.println((1900+date.get ...

  4. ajax 请求

    案例: <html><head><script type="text/javascript">function loadXMLDoc(){var ...

  5. ajaxFileUpload 报这错jQuery.handleError is not a function 博客分类: WEB前端jquery

    ajaxfileuploadhandleError  今天刚打个一个技术群,里面有人问标题上的问题,嘿,我恰好遇过,现在大家至少也在用jquery1.9以上的版本,ajaxfileupload的版本早 ...

  6. img 元素无法获取高度的问题

    项目里有这么一个功能,需要 ajax 从服务器端获取数据,然后本地生成 DOM 结构再 append 到页面上. 其中的图片是直接拿到的图像数据,而不是 url,所以据此生成 dataURI 赋值给 ...

  7. 10 Interesting Linux Command Line Tricks and Tips Worth Knowing

    I passionately enjoy working with commands as they offer more control over a Linux system than GUIs( ...

  8. Entityframework Code First 系列之项目搭建

    Entityframework(以下简称EF)是微软推出的一个ORM(Object Relational Mapping)框架. 优缺点 优点: 易上手,语法简单,查询容易 更新快,不断补足 缺点: ...

  9. javascript-函数的参数和return语句

    × 目录 [1]参数 [2]Arguments对象 [3]函数重载 [4]return 语句 ------------------------------------- 一.参数(最多25个) 可以动 ...

  10. (转)优化js脚本设计,防止浏览器假死

    在Web开发的时候经常会遇到浏览器不响应事件进入假死状态,甚至弹出“脚本运行时间过长“的提示框,如果出现这种情况说明你的脚本已经失控了,必须进行优化. 为什么会出现这种情况呢,我们先来看一下浏览器的内 ...