使用 Gulp 快速打包项目

一、安装

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-concatgulp.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() 内的任务。

六、参考

发表评论

电子邮件地址不会被公开。 必填项已用*标注