Gulp系列教程：监听改变

这是Gulp系列教程的第八部分。今天我会用Gulp.js给不同文件设置监听。

你还记得一开始的watch任务吗？直到现在才启动BrowserSync和开发服务器，但它还没有监听任何文件。我现在来写这些监听任务。

watch是gulp API的一部分。它会监听文件修改，增加或删除并触发任务。

//gulp/config.js 

watch: {
  jekyll: [
    '_config.yml',
    '_config.build.yml',
    src + '/_data/**/*.{json,yml,csv}',
    src + '/_includes/**/*.{html,xml}',
    src + '/_layouts/*.html',
    src + '/_plugins/*.rb',
    src + '/_posts/*.{markdown,md}',
    src + '/**/*.{html,markdown,md,yml,json,txt,xml}',
    src + '/*'
  ],
  sass:    srcAssets + '/scss/**/*.{sass,scss}',
  scripts: srcAssets + '/javascripts/**/*.js',
  images:  srcAssets + '/images/**/*',
  sprites: srcAssets + '/images/**/*.png',
  svg:     'vectors/*.svg'
}

我为Jekyll设置了许多不同类型文件的监听。配置文件，数据文件，布局，引用，插件，文章等。

Sass任务会监听后缀为sass或scss文件的改变。如果修改了某些JavaScript文件就会触发JavaScript。你已经抓住重点了。

// gulp/tasks/development/watch.js

var gulp   = require('gulp');
var config = require('../../config').watch;

/**
 * Start browsersync task and then watch files for changes
 */
gulp.task('watch', ['browsersync'], function() {
  gulp.watch(config.jekyll,  ['jekyll-rebuild']);
  gulp.watch(config.sass,    ['sass', 'scsslint']);
  gulp.watch(config.scripts, ['scripts', 'jshint']);
  gulp.watch(config.images,  ['images']);
  gulp.watch(config.svg,     ['copy:fonts']);
  gulp.watch(config.sprites, ['sprites']);
});

我设置了六个watch任务。每当检测到Jekyll文件修改，删除或添加，就会jekyll-build任务。这个任务会运行Jekyll构建过程并在完成后刷新页面。

对于SCSS文件我运行sass任务并且还额外运行了scsslint任务，它会检查文件的语法错误。

JavaScript文件变化会触发script任务和jshint任务，它们会检查文件中是否有语法错误。

添加，修改或删除SVG文件时会导致矢量字体重新创建。并且作为浏览器不支持矢量字体的备选方案每当改变精灵图的图片时会创建了一个PNG精灵图。使用gulp-svg2png来自动创建SVG文件的PNG也是可能的，但是需要在精灵图上添加额外设计元素，因此我不用。

我现在有三个任务：scsslint，jslint和sprites。

源代码

在Github上查看源码

总结

我这是Gulp系列教程的第八部分的总结。我们学习了如何使用Gulp.js监听文件的修改，删除以及创建和如何触发任务。并且最棒的是：这是Gulp.js API的一部分。我们不需要任何插件帮忙。

本文根据@Stefan Imhoff的《Introduction to Gulp.js 8: Watch for Changes》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://stefanimhoff.de/2014/gulp-tutorial-8-watch/。