摘要：
Gulp是一个基于节点编写的构建工具。有四种主要的API：gulf。src（）-输出合格文件，gulp。dest（）-能够通过管道导入，并编写文件。task（）-定义任务，gulf Watch（）-监听文件。首先，已安装默认节点环境；全局安装gulp:npmi-ggulp创建新文件夹，npm初始化：npminit作为项目开发依赖项安装：npmi Dgulp创建新的gulpfile。js，vargulp=要求；吞咽任务执行命令gulp，好的。
gulp是基于node编写的一个构建工具，有4个主要的API：
gulp.src() - 输出符合条件的文件
gulp.dest() - 能被pipe进来，并写文件
gulp.task() - 定义任务
gulp.watch() - 监听文件
首先，默认node环境已经安装；
全局安装gulp： npm i -g gulp
新建文件夹，npm初始化：npm init
作为项目开发依赖安装：npm i -D gulp
新建gulpfile.js，
var gulp = require('gulp'); gulp.task('default', function() { console.log('default'); });
执行命令gulp,ok。
一般需要区分开发和生产环境，
gulp.task('default', ['dev']);
gulp.task('dev', ['connect', 'watch']);
gulp.task('build', ['html-build', 'file-build'], function() {
return gulp.src('dist/rev', { read: false })
.pipe(clean());
});需要的模块：
gulp-connect：开发阶段，因为的前后端分离的项目，所以需要一个web服务器, gulp-connect是一个带有livereload的web服务器
gulp-changed：可以过滤那些改动过的文件
gulp-babel:通过babel来使用新版es
gulp-sass: 编译sass
gulp-clean: 移除文件和文件夹
gulp-rev: 给静态资源文件加上hash
gulp-htmlmin: 压缩html
http-proxy-middleware：一个nodeJS代理的中间件
gulp-plumber：处理pipe破裂导致的错误
gulp-rev-collector : 从manifest中收集数据，然后替换在html模版里的链接
gulp-sourcemaps： 生产sourcemaps
gulp-tag-include-html: 可以使用include标签来将html元素引入到别的文件中
gulp-trim-js-css: 将style标签移动到head标签中,支持sass语法编译 将script标签移动到body的最后，支持es2015语法编译
rimraf: 为node实现的unix命令rm -rf
npm install --save-dev gulp-connect ...引入，
var sass = require('gulp-sass'), proxy = require('http-proxy-middleware'), sourcemaps = require('gulp-sourcemaps'), babel = require('gulp-babel'), clean = require('gulp-clean'), rev = require('gulp-rev'), revCollector = require('gulp-rev-collector'), htmlmin = require('gulp-htmlmin'), plumber = require('gulp-plumber'), include = require('gulp-tag-include-html'), trimJsCss = require('gulp-trim-js-css'), path = require('path'), connect = require('gulp-connect'), changed = require('gulp-changed'), DEV_PATH = path.resolve(__dirname, './dev'), BASENAME = path.basename(__dirname), DIST_PATH = path.resolve(__dirname, 'dist/www', BASENAME);
开发阶段配置如下，
gulp.task('connect', function() {
connect.server({
root: DEV_PATH,
port: 8080,
livereload: true,
middleware: function(connect, opt) { //设置代理
return [
proxy('/index', {
target: 'http://youwebsite.com',
changeOrigin: true
})
]
}
});
});
// 数组里的任务会在你当前任务运行之前完成。
gulp.task('watch', ['html', 'js', 'css', 'file'], function() {
gulp.watch('src/**/*.html', ['html']);
gulp.watch('src/**/*.htm', ['htm']);
gulp.watch('src/**/*.js', ['js']);
gulp.watch('src/**/*.{css,scss}', ['css']);
gulp.watch('src/**/*.!(html|htm|js|css|scss)', ['file']);
});
gulp.task('html', function() {
return gulp.src('src/**/*.html')
.pipe(changed('dev', { hasChanged: changed.compareLastModifiedTime }))
.pipe(plumber())
.pipe(include({
begin: '<%',
end: '%>'
}))
.pipe(trimJsCss())
.pipe(gulp.dest('dev'))
.pipe(connect.reload());
});gulp.task('htm', ['html-all'], function(cb) {
return gulp.src('src/**/*.html')
.pipe(connect.reload());
});
gulp.task('html-all', function() {
return gulp.src('src/**/*.html')
.pipe(plumber())
.pipe(include({
begin: '<%',
end: '%>'
}))
.pipe(trimJsCss())
.pipe(gulp.dest('dev'));
});
gulp.task('js', function() {
return gulp.src(['src/**/*.js', '!src/**/lib/**/*.*'])
.pipe(changed('dev', { hasChanged: changed.compareLastModifiedTime }))
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(babel({ presets: ['es2015'] }))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dev'))
.pipe(connect.reload());
});
gulp.task('css', function() {
return gulp.src(['src/**/*.{css,scss}', '!src/**/lib/**/*.*'])
.pipe(changed('dev/', {
hasChanged: changed.compareLastModifiedTime, //比较修改时间
extension: '.css' //因为是.scss与.css 比较，所以要设置文件后缀
}))
.pipe(plumber())
.pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))
.pipe(gulp.dest('dev'))
.pipe(connect.reload());
});
gulp.task('file', function() {
return gulp.src(['src/**/*.!(html|htm|js|css|scss)', 'src/**/lib/**/*.*'])
.pipe(changed('dev/', { hasChanged: changed.compareLastModifiedTime }))
.pipe(gulp.dest('dev'))
.pipe(connect.reload());
});生产阶段打包时，首先定义clean-build任务，供其他任务使用。
gulp.task('clean-build', function() {
return gulp.src(['dist', 'dev'], { read: false })
.pipe(clean());
});然后分别定义css-build, file-build, js-build, html-build任务，打包得到上线所需代码。
gulp.task('js-build', ['clean-build'], function() {
return gulp.src(['src/**/*.js', '!src/**/lib/**/*.*'])
.pipe(babel({ presets: ['es2015'], minified: true, comments: false }))
.pipe(rev())
.pipe(gulp.dest(DIST_PATH))
.pipe(rev.manifest())
.pipe(gulp.dest('dist/rev/js'));
});gulp.task('css-build', ['clean-build'], function() {
return gulp.src(['src/**/*.{css,scss}', '!src/**/lib/**/*.*'])
.pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
.pipe(rev())
.pipe(gulp.dest(DIST_PATH))
.pipe(rev.manifest())
.pipe(gulp.dest('dist/rev/css'));
});gulp.task('file-build', ['clean-build'], function() {
return gulp.src(['src/**/*.!(html|htm|js|css|scss)', 'src/**/lib/**/*.*'])
.pipe(gulp.dest(DIST_PATH));
});gulp.task('html-build', ['js-build', 'css-build'], function() {
return gulp.src(['src/**/*.html', '!src/assets/lib', '!src/assets/lib/**', 'dist/rev/**/*.json'])
.pipe(include({
begin: '<%',
end: '%>'
}))
.pipe(revCollector())
.pipe(trimJsCss())
.pipe(htmlmin({
removeComments: true, //清除HTML注释
collapseWhitespace: true, //压缩HTML
minifyJS: true, //压缩页面JS
minifyCSS: true //压缩页面CSS
}))
.pipe(gulp.dest(DIST_PATH));
});