2、gulp基础方法和常用插件

1、Gulp方法：

• gulp.task() 建立gulp任务
• gulp.src() 获取任务要处理的文件
• gulp.dest() 输出文件
• gulp.watch() 监听文件变化

基本使用

gulpfile.js 使用gulp.task建立任务

// 引入 gulp 模块
const gulp = require('gulp')

//使用gulp.task建立任务
//copyIndex为任务名
gulp.task('copyIndex',() => {
    console.log('任务：copyIndex');
    
    //1.使用gulp.src获取需要处理的文件
    return gulp.src('./index.html')
    .pipe(gulp.dest('dist/index'))
    //处理后文件添加（复制操作）到dist文件目录，文件夹没有会自动新建
})

运行测试（终端）

//gulp 任务名
gulp copyIndex

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

2、Gulp常用插件

• gulp-htmlmin html文件压缩
• gulp-csso css文件压缩
• gulp-babel JavaScript语法转换
• gulp-less less语法转换
• gulp-uglify 压缩混淆JavaScript
• gulp-file-include 公共文件包含
• browsersync 浏览器实时同步

插件基本使用

• gulp-htmlmin ---- html文件压缩

//安装gulp-htmlmin插件
// npm install gulp-htmlmin

// 引入 gulp 模块
const gulp = require('gulp')
// 引入 gulp-htmlmin 插件模块
const htmlmin = require('gulp-htmlmin')

// 压缩html文件操作
gulp.task('index_htmlmin',() => {
    console.log('压缩index.html文件任务');
    //1.使用gulp.src获取需要处理的文件
    return gulp.src('./index.html')  //可以使用通配符*来查找所有html文件，例如：gulp.src('./Html/**/*.html')
    //2.使用htmlmin方法实现html文件压缩
    .pipe(htmlmin({ collapseWhitespace: true }))
    //3.输出处理完成文件到指定目录
    .pipe(gulp.dest('dist/index_htmlmin')) //处理后文件添加（复制）到dist文件目录，文件夹没有会自动新建
})

//终端运行 gulp index_htmlmin

压缩后html文件

• gulp-file-include ---- 公共文件提取

//安装gulp-file-include插件
//npm install --save-dev gulp-file-include

// 引入 gulp 模块
const gulp = require('gulp')
// 引入 gulp-htmlmin 插件模块
const htmlmin = require('gulp-htmlmin')
// 引入 gulp-file-include 插件模块
const fileinclude = require('gulp-file-include');

// 提取HTML文件中公共代码
gulp.task('index_htmlmin',() => {
    console.log('压缩index.html文件任务和提取公共代码');
    //1.使用gulp.src获取需要处理的文件
    return gulp.src('./index.html')  
    //2.调用fileinclude方法，提取公共代码
    .pipe(fileinclude())
    //3.使用htmlmin方法实现html文件压缩
    .pipe(htmlmin({ collapseWhitespace: true }))
    //4.输出处理完成文件到指定目录
    .pipe(gulp.dest('dist/index_htmlmin')) 
})

原html文件结构如下：

新建common文件夹下，header.html作为公共代码文件，将所有html文件中公共代码剪切到本文件中。

原文件中公共代码公共代码通过gulp-file-include插件提供的语法引入。

执行gulp-index_htmlmin命令

可以看到提取出去的公共代码，又包含在构建后的代码中了

• gulp-less ---- less语法转换 、 gulp-csso ---- css文件压缩

// 安装 gulp-less 插件
//npm install gulp-less

// 安装 gulp-csso 插件
//npm install gulp-csso --save-dev

// 引入 gulp 模块
const gulp = require('gulp');
// 引入 gulp-less 插件模块
const less = require('gulp-less');
//引入 gulp-csso 插件模块
const csso = require('gulp-csso');
// 引入 path 模块
const path = require('path');

// less语法转换
gulp.task('less', function () {
    return gulp.src('./less/**/*.less')
      .pipe(less({
        paths: [ path.join(__dirname, 'less', 'includes') ]
      }))
      .pipe(gulp.dest('dist/less_To_css'));
  });
  
  //终端运行 gulp less

原less文件

执行转换后新生成index.css文件

组合使用，先less转css,然后进行css压缩

//less语法转换和css压缩
gulp.task('lessOrcss', function () {
    return gulp.src(['./css/*.less','./css/*.css']) //通过数组实现多选，选择css文件夹下所有less和css文件
    //1、调用less方法，实现less语法转换
      .pipe(less({
        paths: [ path.join(__dirname, 'less', 'includes') ]
      }))
    // 2、调用csso,压缩css文件
      .pipe(csso({
        restructure: false,
        sourceMap: true,
        debug: true
       }))
    //3.输出处理完成文件到指定目录
      .pipe(gulp.dest('dist/less_To_css'));
  });

转换后再压缩

• gulp-babel ---- JavaScript语法转换 、 gulp-uglify ---- JavaScript文件压缩

// 安装 gulp-babel 插件
// # Babel 7
// $ npm install --save-dev gulp-babel '@babel/core' '@babel/preset-env'
// # Babel 6
// $ npm install --save-dev gulp-babel@7 babel-core babel-preset-env

// 安装 gulp-uglify 插件
// npm install --save-dev gulp-uglify

// 引入 gulp 模块
const gulp = require('gulp');
//引入 gulp-babel 插件模块
const babel = require('gulp-babel');
//引入 gulp-uglify 插件模块
const uglify = require('gulp-uglify');

// javascript语法转换（es6转换）后再代码压缩
gulp.task('JsES6', () =>{
   return gulp.src('js/cityselect.js')
    //js语法转换
    .pipe(babel({
        presets: ['@babel/env'] //判断当前代码运行环境，将代码转换为当前环境所支持的代码
    }))
    // js代码压缩
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
});


//终端运行gulp JsES6

转换压缩后js文件

通过一个命令，依次执行所有任务（构建任务）

gulp.task('default', ['copyIndex','copy','index_htmlmin','lessOrcss','JsES6']);
//按照数组内顺序依次执行
//终端运行gulp或者gulp default

参考地址：gulpjs.com/plugins/