gulp学习总结

gulp学习

gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;gulp不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用gulp我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。
gulp 和 grunt 非常类似,但相比于 grunt 的频繁 IO 操作,gulp 的流操作,能更快地更便捷地完成构建工作。

安装

Gulp需要全局安装，然后再在项目的开发目录中安装为本地模块。先进入项目目录，运行下面的命令。

npm install -g gulpnpm install --save-dev gulp

除了安装gulp以外，不同的任务还需要安装不同的gulp插件模块。

$ npm install --save-dev 插件名

gulpfile.js

项目根目录中的gulpfile.js，是Gulp的配置文件。
示例：

var gulp = require('gulp');var uglify = require('gulp-uglify');gulp.task('minify', function () {  gulp.src('js/app.js')    .pipe(uglify())    .pipe(gulp.dest('build'))});

上面代码中，gulpfile.js加载gulp和gulp-uglify模块之后，使用gulp模块的task方法指定任务minify。task方法有两个参数，第一个是任务名，第二个是任务函数。在任务函数中，使用gulp模块的src方法，指定所要处理的文件，然后使用pipe方法，将上一步的输出转为当前的输入，进行链式处理。

task方法的回调函数使用了两次pipe方法，也就是说做了两种处理。第一种处理是使用gulp-uglify模块，压缩源码；第二种处理是使用gulp模块的dest方法，将上一步的输出写入本地文件，这里是build.js（代码中省略了后缀名js）。

执行minify任务时，就在项目目录中执行下面命令就可以了。

$ gulp minify

gulp充分使用了”管道”思想，就是一个数据流（stream）：src方法读入文件产生数据流，dest方法将数据流写入文件，中间是一些中间步骤，每一步都对数据流进行一些处理。

数据流的例子

gulp.task('js', function () {  return gulp.src('js/*.js')    .pipe(jshint())    .pipe(uglify())    .pipe(concat('app.js'))    .pipe(gulp.dest('build'));});

上面代码使用pipe命令，分别进行jshint、uglify、concat三步处理。

gulp模块的方法

src()

gulp模块的src方法，用于产生数据流。它的参数表示所要处理的文件，这些指定的文件会转换成数据流。参数的写法一般有以下几种形式。

• js/app.js：指定确切的文件名。
• js/*.js：某个目录所有后缀名为js的文件。
• js/**/*.js：某个目录及其所有子目录中的所有后缀名为js的文件。
• !js/app.js：除了js/app.js以外的所有文件。
• *.+(js|css)：匹配项目根目录下，所有后缀名为js或css的文件。
  src方法的参数还可以是一个数组，用来指定多个成员。

gulp.src(['js/**/*.js', '!js/**/*.min.js'])

dest()

dest方法：将管道的输出写入文件，同时将这些输出继续输出，所以可以依次调用多次dest方法，将输出写入多个目录。如果有目录不存在，将会被新建。

gulp.src('./client/templates/*.jade')  .pipe(jade())  .pipe(gulp.dest('./build/templates'))  .pipe(minify())  .pipe(gulp.dest('./build/minified_templates'));

dest方法还可以接受第二个参数，表示配置对象。

gulp.dest('build', {  cwd: './app',  mode: '0644'})

配置对象有两个字段。cwd字段指定写入路径的基准目录，默认是当前目录；mode字段指定写入文件的权限，默认是0777。

task()

task方法用于定义具体的任务。它的第一个参数是任务名，第二个参数是任务函数。下面是一个非常简单的任务函数。

gulp.task('greet', function () {   console.log('Hello world!');});

task方法还可以指定按顺序运行的一组任务。

gulp.task('build', ['css', 'js', 'imgs']);

上面代码先指定build任务，它由css、js、imgs三个任务所组成，task方法会并发执行这三个任务。注意，由于每个任务都是异步调用，所以没有办法保证js任务的开始运行的时间，正是css任务运行结束。
如果希望各个任务严格按次序运行，可以把前一个任务写成后一个任务的依赖模块。

gulp.task('css', ['greet'], function () {   // Deal with CSS here});

上面代码表明，css任务依赖greet任务，所以css一定会在greet运行完成后再运行。
task方法的回调函数，还可以接受一个函数作为参数，这对执行异步任务非常有用。

// 执行shell命令var exec = require('child_process').exec;gulp.task('jekyll', function(cb) {  // build Jekyll  exec('jekyll build', function(err) {    if (err) return cb(err); // return error    cb(); // finished task  });});

如果一个任务的名字为default，就表明它是”默认任务”，在命令行直接输入gulp命令，就会运行该任务。

gulp.task('default', function () {  // Your default task});// 或者gulp.task('default', ['styles', 'jshint', 'watch']);

执行的时候，直接使用gulp，就会运行styles、jshint、watch三个任务。

watch()

watch方法用于指定需要监视的文件。一旦这些文件发生变动，就运行指定任务。

gulp.task('watch', function () {   gulp.watch('templates/*.tmpl.html', ['build']);});

上面代码指定，一旦templates目录中的模板文件发生变化，就运行build任务。
watch方法也可以用回调函数，代替指定的任务。

gulp.watch('templates/*.tmpl.html', function (event) {   console.log('Event type: ' + event.type);   console.log('Event path: ' + event.path);});

另一种写法是watch方法所监控的文件发生变化时（修改、增加、删除文件），会触发change事件。可以对change事件指定回调函数。

var watcher = gulp.watch('templates/*.tmpl.html', ['build']);watcher.on('change', function (event) {   console.log('Event type: ' + event.type);   console.log('Event path: ' + event.path);});

除了change事件，watch方法还可能触发以下事件。

• end：回调函数运行完毕时触发。
• error：发生错误时触发。
• ready：当开始监听文件时触发。
• nomatch：没有匹配的监听文件时触发。
  watcher对象还包含其他一些方法。
• watcher.end()：停止watcher对象，不会再调用任务或回调函数。
• watcher.files()：返回watcher对象监视的文件。
• watcher.add(glob)：增加所要监视的文件，它还可以附加第二个参数，表示回调函数。
• watcher.remove(filepath)：从watcher对象中移走一个监视的文件。

gulp-load-plugins模块

一般情况下，gulpfile.js中的模块需要一个个加载。
假设package.json文件包含以下内容。

{   "devDependencies": {      "gulp-concat": "~2.2.0",      "gulp-uglify": "~0.2.1",      "gulp-jshint": "~1.5.1",      "gulp": "~3.5.6"   }}

var gulp = require('gulp'),    jshint = require('gulp-jshint'),    uglify = require('gulp-uglify'),    concat = require('gulp-concat');gulp.task('js', function () {   return gulp.src('js/*.js')      .pipe(jshint())      .pipe(jshint.reporter('default'))      .pipe(uglify())      .pipe(concat('app.js'))      .pipe(gulp.dest('build'));});

上面代码中，除了gulp模块以外，还加载另外三个模块。
这种一一加载的写法，比较麻烦。使用gulp-load-plugins模块，可以加载package.json文件中所有的gulp模块。上面的代码用gulp-load-plugins模块改写，就是下面这样。

var gulp = require('gulp'),    gulpLoadPlugins = require('gulp-load-plugins'),    plugins = gulpLoadPlugins();gulp.task('js', function () {   return gulp.src('js/*.js')      .pipe(plugins.jshint())      .pipe(plugins.jshint.reporter('default'))      .pipe(plugins.uglify())      .pipe(plugins.concat('app.js'))      .pipe(gulp.dest('build'));});

gulp-livereload模块

gulp-livereload模块用于自动刷新浏览器，反映出源码的最新变化。它除了模块以外，还需要在浏览器中安装插件，用来配合源码变化。

var gulp = require('gulp'),    less = require('gulp-less'),    livereload = require('gulp-livereload'),    watch = require('gulp-watch');gulp.task('less', function() {   gulp.src('less/*.less')      .pipe(watch("less/*.less"))      .pipe(less())      .pipe(gulp.dest('css'))      .pipe(livereload());});

上面代码监视less文件，一旦编译完成，就自动刷新浏览器。

gulp-htmlmin插件

使用gulp-htmlmin可以压缩html，可以压缩页面javascript、css，去除页面空格、注释，删除多余属性等操作
需要以下6个步骤：

• 安装nodejs
• 全局安装gulp
  npm install -g gulp
  查看是否正确安装：命令提示符执行gulp -v，出现版本号即为正确安装
• 创建package.json文件
  npm init
• 本地安装gulp
  npm insatll gulp –save -dev
• 本地安装gulp-htmlmin
  npm insatll gulp-htmlmin –save -dev
• 创建gulpfile.js文件
  gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件
  说明：
  1.-g:全局安装,将会安装在C:\Users\Administrator\AppData\Roaming\npm,并且写入系统环境变量;非全局安装:将会安装在当前定位目录;全局安装可以通过命令行在任何地方调用它,本地安装将安装在定位目录的node_modules文件夹下,通过require()调用
  2.全局安装gulp是为了执行gulp任务,项目目录安装gulp则是为了调用gulp插件的功能。
  3.–save-dev 保存配置信息至 package.json的devDependencies 节点
  package.json是nodejs项目配置文件
• -dev:保存至package.json的devDependencies节点，不指定-dev将保存至dependencies节点
  为什么要保存至package.json？
  因为node插件包相对来说非常庞大，所以不加入版本管理，将配置信息写入package.json并将其加入版本管理，其他开发者对应下载即可（命令提示符执行npm install，则会根据package.json下载所有需要的包）。
  gulpfile.js文件内容如下：

var gulp = require("gulp");//获取gulp//获取htmlmin模块（用于压缩html）var htmlmin = require("gulp-htmlmin");//定义一个htmlMin任务（自定义任务名称）gulp.task("htmlMin",function(){    var options = {        removeComments: true,//清除HTML注释        collapseWhitespace: true,//压缩HTML        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"        minifyJS: true,//压缩页面JS        minifyCSS: true//压缩页面CSS    };    gulp.src("js/html/*.html")//该任务要操作的文件    .pipe(htmlmin(options))//该任务调用的模    .pipe(gulp.dest("dist/html"));//另存操作后的文件});

配置文件说明：

• require() 是node(CommonJS)中获取模块的语法。在 gulp 中你只需要理解 require() 可以获取模块
• gulp.task(name, fn) - 定义任务，第一个参数是任务名，第二个参数是任务内容。
• gulp.src(path) - 选择文件,传入参数是文件路径。
• gulp.dest(path) - 输出文件
• gulp.pipe() - 管道，可以暂时将 pipe 理解为将操作加入执行队列

命令提示符执行：gulp htmlMin
gulp的相关插件还有好多，安装和配置基本类似，后续再进行完善补充。

gulp项目配置实例

var gulp = require('gulp');var browserify = require('gulp-browserify');var uglify = require('gulp-uglify');  var browserSync = require('browser-sync').create();var sass        = require('gulp-sass');var reload      = browserSync.reload;var config = {  baseDir: 'app',  watchFiles: [ 'app/*.html', 'app/css/*.css', 'app/js/*.js' ]}gulp.task('server',['sass'], function() {  browserSync.init({    files: config.watchFiles,    server: {      baseDir: config.baseDir    }  });  gulp.watch("app/scss/*.scss", ['sass']);  gulp.watch("app/script/*.js", ['js-watch']);  gulp.watch("app/*.html").on('change', reload);})// scss编译后的css将注入到浏览器里实现更新gulp.task('sass', function() {    return gulp.src("app/scss/*.scss")        .pipe(sass())        .pipe(gulp.dest("app/css"))        .pipe(reload({stream: true}));});// 处理完JS文件后返回流gulp.task('js', function () {    return gulp.src('app/script/*.js')        .pipe(browserify())        .pipe(uglify())        .pipe(gulp.dest('app/js'));});// 创建一个任务确保JS任务完成之前能够继续响应// 浏览器重载gulp.task('js-watch', ['js'], browserSync.reload);gulp.task('default',['server']); //定义默认任务