这是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/ 。