(本文是基于HKUST的NodeJS课程Gulp部分的学习笔记)
首先,Grunt和Gulp都是一种工作流设计的模式,分别采用了两种有代表性的的工作流模型。
Grunt的工作是基于配置文件的。Grunt中各个module实现其各自的功能,并生成其对应的输出结果。下一个module将之前生成的输出结果作为输入文件使用。在整个流程完成后,文件系统中将遗留临时文件。(与SAP BI Platform的管理工具的原理类似)
Gulp与Grunt不同,在于其代码式的流程控制,而非配置式的。而且,Gulp借鉴了UNIX中Pipe的思想——A流程模块的输出将被直接Pipe到下一个流程模块中,不产生中间文件。
在开始之前,项目一级目录下有app文件夹包含了所有的web页面信息,另外包含package.json配置文件,初始配置如下:
{
"name": "gulpTest",
"private": true,
"devDependencies": {
},
"engines": {
"node": ">=0.10.0"
}
}
第一步,安装gulp到NodeJS全局环境中,
npm install -g gulp
在项目一级目录下执行命令:
npm install gulp --save-dev
第二步,安装需要的gulp plugins,这将花费几分钟时间:
npm install jshint gulp-jshint jshint-stylish gulp-imagemin gulp-concat gulp-uglify gulp-minify-css gulp-usemin gulp-cache gulp-changed gulp-rev gulp-rename gulp-notify browser-sync del --save-dev
关于这15个module的具体功能解释,请参考gulp项目文档。
第三步,编写gulp代码如下:
var gulp = require('gulp'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
stylish = require('jshint-stylish'),
uglify = require('gulp-uglify'),
usemin = require('gulp-usemin'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
changed = require('gulp-changed'),
rev = require('gulp-rev'),
browserSync = require('browser-sync'),
del = require('del');
gulp.task('jshint',
function() {
return gulp.src('app/scripts/**/*.js').pipe(jshint()).pipe(jshint.reporter(stylish));
});
// Clean
gulp.task('clean',
function() {
return del(['dist']);
});
// Default task
gulp.task('default', ['clean'],
function() {
// the usemin, imagemin and copyfonts are running at the same time
gulp.start('usemin', 'imagemin', 'copyfonts');
});
// the jshint task will be done before usemin assigned by the follow line code
gulp.task('usemin', ['jshint'],
function() {
// core procedure
return gulp.src('./app/index.html').pipe(usemin({
css: [minifycss(), rev()],
js: [uglify(), rev()]
})).pipe(gulp.dest('dist/'));
});
// Images
gulp.task('imagemin',
function() {
return del(['dist/images']),
gulp.src('app/images/**/*').pipe(cache(imagemin({
optimizationLevel: 3,
progressive: true,
interlaced: true
}))).pipe(gulp.dest('dist/images')).pipe(notify({
message: 'Images task complete'
}));
});
gulp.task('copyfonts', ['clean'],
function() {
gulp.src('./bower_components/font-awesome/fonts/**/*.{ttf,woff,eof,svg}*').pipe(gulp.dest('./dist/fonts'));
gulp.src('./bower_components/bootstrap/dist/fonts/**/*.{ttf,woff,eof,svg}*').pipe(gulp.dest('./dist/fonts'));
});
// Watch
gulp.task('watch', ['browser-sync'],
function() {
// Watch .js files
gulp.watch('{app/scripts/**/*.js,app/styles/**/*.css,app/**/*.html}', ['usemin']);
// Watch image files
gulp.watch('app/images/**/*', ['imagemin']);
});
gulp.task('browser-sync', ['default'],
function() {
var files = ['app/**/*.html', 'app/styles/**/*.css', 'app/images/**/*.png', 'app/scripts/**/*.js', 'dist/**/*'];
browserSync.init(files, {
server: {
baseDir: "dist",
index: "index.html"
}
});
// Watch any files in dist/, reload on change
gulp.watch(['dist/**']).on('change', browserSync.reload);
});
由于最近工作紧张,再次略去代码解释。希望下次回顾的时候能看懂……
最后,在一级目录下运行命令:
gulp
可以看到dist文件夹成功生成。
在一级目录下运行命令:
gulp watch
现在可以看到浏览器打开了本地的3000端口,刷新后index页面出现。在文件系统中修改index文件,可以看到浏览器同步刷新该修改。