一、安装
npm install --save-dev gulp gulp-cli
二、创建配置文件 gulpfile.js
定义 Gulp 任务，从而使用 gulp ${taskName} 来运行他。
# npm pkg
npm install --save-dev gulp-uglify
# gulpfile.js
const gulp = require('gulp');
const uglify = require('gulp-uglify');
gulp.task('build', function () {
return gulp
.src('./src/index.js')
.pipe(uglify())
.pipe(gulp.dest('lib'));
});
# >_
npx gulp build
gulp.task() 定义任务名字。gulp.src() 方法存放源文件（本例 ./src/index.js），如果要处理多个文件要写成数组形式：gulp.src(['1.js', '2.js'])。通过管道 .pipe() 内的方法进行处理这些文件，最后通过 gulp.dest() 保存修改过的文件。
三、打包多个文件
# npm pkg
npm install --save-dev gulp-concat
# gulpfile.js
const gulp = require('gulp');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
gulp.task('build', function () {
console.log('打包多个文件!');
return gulp
.src(['./src/1.js', './src/2.js', './src/3.js', './src/4.js', './src/5.js'])
.pipe(uglify())
.pipe(concat('index.js'))
.pipe(gulp.dest('lib'));
});
# >_
npx gulp build
gulp-concat 将 gulp.src() 的文件按顺序打包进 concat() 内定义的文件名中。
四、打包 HTML
# npm pkg
npm install --save-dev gulp-htmlclean gulp-htmlmin
# gulpfile.js
const gulp = require('gulp');
const htmlclean = require('gulp-htmlclean'); // 精简html
const htmlmin = require('gulp-htmlmin'); // 压缩html
gulp.task('html', function () {
return gulp
.src('./src/index.html')
.pipe(htmlclean())
.pipe(
htmlmin({
removeComments: true, // 清除HTML注释
collapseWhitespace: true, // 压缩HTML
minifyJS: true, // 压缩页面JS
minifyCSS: true, // 压缩页面CSS
minifyURLs: true
})
)
.pipe(gulp.dest('lib'));
});
# >_
npx gulp html
思路和打包 JS 文件如出一辙，即 Gulp 是输入、管道、输出三步走，对待一切文件一视同仁。
五、开发 & 调试
使用 gulp.watch() 监听文件变化并打包。
# gulpfile.js
// ...
gulp.task('watch', function () {
gulp.watch('src/**/*.js', gulp.series(['build']));
});
# >_
npx gulp watch
gulp.watch() 监听相应文件的变化，然后执行 gulp.series() 内的任务。
