NPM包——按需加载gulp

一、gulp

• gulp是一种自动化构建工具可以自动化构建流程。可以编写指定的任务，简化工作量。

二、使用

• 创建 gulpfile.js 文件
• 在该文件中制定每次需要执行的任务。
• 例：

const gulp = require('gulp');
//将scr下的文件移动到lib目录下
gulp.task('libHandler', ()=>{
  return gulp.src('./src/***')
    .pipe(gulp.dest('./lib'))
})
module.exports.default = gulp.parallel('libHandler')

• 在cmd中运行 gulp

三、gulp API

• gulp.task 用来定义任务

gulp.task([name|'name'], (done) => {
   // Do something
  done()//执行回调，表示这个异步任务已经完成，只是起一个通知的作用
})

• gulp.src 创建一个流，用于从文件系统读取文件对象。

gulp.src('input/*.js')

• gulp.dest 创建一个用于将 Vinyl 对象写入到文件系统的流。

//将input下的js文件移动到output文件下
gulp.src('input/*.js')
    .pipe(dest('output/'));

• gulp.series 将任务函数和/或组合操作组合成更大的操作，这些操作将按顺序依次执行

gulp.series('taskName', 'taskName2'); 

• gulp.parallel 将任务功能和/或组合操作组合成同时执行的较大操作

gulp.parallel('taskName', 'taskName2'); 

• gulp.watch 监听glob(文件等)发生更改时运行任务

gulp.watch('./src/css/*.css', function(cb) {
   // Do something
  cb();
})

四、gulp plugins

1、压缩css文件

• gulp-autoprefixer、gulp-cssmin
• 例：

// 压缩css文件
const cssmin = require('gulp-cssmin'); // 压缩css
const autoprefixer = require('gulp-autoprefixer'); // 给css的属性加前缀
gulp.task('cssHandler', ()=>{
  return gulp.src('./src/plugins/css/*.css')
    .pipe(autoprefixer())
    .pipe(cssmin())
    .pipe(gulp.dest('./dist/css'))
})

2、压缩js文件

• gulp-babel、gulp-uglify
• 例：

// 压缩js文件
const uglify = require('gulp-uglify'); // 压缩js
const babel = require('gulp-babel'); // es6转es5语法的
gulp.task('jsHandler', ()=>{
  return gulp.src('./src/plugins/index.js')
    .pipe(babel({
      presets:['@babel/env']
    }))
    // .pipe(uglify())
    .pipe(gulp.dest('./dist/js'))
})

3、压缩html文件

• gulp-htmlmin
• 例：

const htmlmin = require('gulp-htmlmin'); // 压缩html
//压缩html文件
gulp.task('htmlHandler', ()=>{
  return gulp.src('./src/pages/**')
    .pipe(htmlmin({
      collapseBooleanAttributes:true,   //html属性缩写
      collapseWhitespace:true,          //删除空白
      removeComments:true,				//去除html注释
      removeAttributeQuotes:true,       //尽可能删除属性的引号
      minifyJS:true,  					//压缩js
      minifyCSS:true					//压缩css
    }))
    .pipe(gulp.dest('./dist/pages'))
})

4、删除文件

• del

const del = require('del');// 删除文件的
// 删除dist文件夹
gulp.task('delHandler', ()=>{
  return del(['./dist'])
})

5、运行npm 命令

• gulp-run

//执行  npm run lib 命令
gulp.task('testRun', (done) => {
  run('npm run lib').exec()
  done()
})