gulp插件使用-原创手记-慕课网

一、gulp-htmlmin:html文件压缩

1.下载插件

npm install gulp-htmlmin
npm install gulp-file-include

2.gulpfile.js中引用插件

const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');

3.编写任务，调用插件

//html任务
//1.html文件中代码的压缩操作
//2.抽取html文件中的公共代码
gulp.task('htmlmin',(done) => {
  gulp.src('./src/*.html')//*代表src下所有的HTML文件
          .pipe(fileinclude())//抽离公共代码
      //压缩HTML文件中的代码
      .pipe(htmlmin({ collapseWhitespace: true }))//collapseWhitespace：代表压缩html代码是否压缩空格
      .pipe(gulp.dest('dist'))
      done()
})

注意：虽然任务是压缩文件代码和抽离公共代码的顺序，但是我们做任务是要先抽离公共代码，再去压缩文件代码

我们把公共代码放在src目录下的common目录中

公共代码抽离出来后，在原本的HTML文件中引入公共代码

@@include('./common/header.html')

这样执行了htmlmin这个任务后就会看到，压缩后的文件中也有了公共的头部

二、gulp-csso:压缩css

1.下载插件

npm install gulp-csso
npm install gulp-less

2.gulpfile.js中引用插件

const less = require('gulp-less');
const csso = require('gulp-csso');

3.编写任务，调用插件

//css任务
//1.less语法转换
//2.css代码压缩
gulp.task('cssmin',(done) => {
  //选择css目录下的所有less文件以及css文件
  gulp.src(['./src/css/*.less','./src/css/*.css'])
      .pipe(less())//将less语法转换为css语法
      .pipe(csso())//将css代码进行压缩
      .pipe(gulp.dest('dist/css'));//将处理的结果进行输出
      done();
})

结果：

三、gulp-babel:JavaScript语法转化,es6转成es5

1.下载babel插件 https://www.npmjs.com/package/gulp-babel

通过bebel插件，转化成es5，通过gulp-uglify来压缩代码

npm install gulp-babel @babel/core @babel/preset-env

2.在gulpfile.js文件中引入插件：

const babel = require('gulp-babel');

3.编写任务

//js任务
//1.es6代码转换
//2.代码压缩
gulp.task('jsmin',(done) => {
  gulp.src('./src/js/*.js')
      .pipe(babel({
        //它可以判断当前代码的运行环境，将代码转换为当前运行环境所支持的代码
        presets: ['@babel/env']
      }))
      .pipe(gulp.dest('dist/js'))
  done();
})

4.调用插件

gulp jsmin

结果：

压缩js文件：

1.下载babel插件 https://www.npmjs.com/package/gulp-uglify

通过bebel插件，转化成es5，通过gulp-uglify来压缩代码

npm install gulp-uglify

2.在gulpfile.js文件中引入插件：

const uglify = require('gulp-uglify');

3.编写任务

//js任务
//1.es6代码转换
//2.代码压缩
gulp.task('jsmin',(done) => {
  gulp.src('./src/js/*.js')
      .pipe(babel({
        //它可以判断当前代码的运行环境，将代码转换为当前运行环境所支持的代码
        presets: ['@babel/env']
      }))
      .pipe(gulp.dest('dist/js'))
  done();
})

4.调用插件

gulp jsmin

结果：

四、复制文件夹

一般src文件夹中还会有image文件夹和lib文件夹，需要把他们也复制到dist目录下，只要编写下面任务，执行就好了

//复制文件夹
gulp.task('copy',(done) => {
  gulp.src('./src/image/*')
  .pipe(gulp.dest('dist/image'));
  gulp.src('./src/lib/*')
      .pipe(gulp.dest('dist/lib'));
  
  done();
})

执行：gulp copy

结果：

注意：如果image文件夹或者lib文件夹里面没有文件，是空的文件夹，就不会复制到dist文件夹中，就像上图中lib文件夹里面什么都没有，所以dist文件夹中也没有lib文件夹

现在这些任务都知道怎么执行了，因为是分别编写的，如果想要执行也要分别去执行他们，怎样才能执行一个任务，其他任务都能跟着执行呢？

接下来我们就来创建一个构建任务

//构建任务
gulp.task('default',['htmlmin','cssmin','jsmin','copy']);

执行：gulp default

这个原因是：

运行gulp项目报错：AssertionError: Task function must be specified，那是因为你安装了gulp4.0.0，gulpfile.js用的是gulp3.9.1的语法。

AssertionError: Task function must be specified错误解决方案
npm i gulp@3.9.1重新安装gulp到3.91版
按gulp4.0.0重写gulpfile.js任务列表

把代码改成如下的样子就好了：

//构建任务
gulp.task('default',gulp.series('htmlmin','cssmin','jsmin','copy'));

执行结果：

如果任务的名字是“default”，执行时可以省略default