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的一部分。我們不需要任何插件幫忙。