Gulp模块简单使用

功能

Gulp是一个第三方模块，可以将机械化操作编写成任务，想要执行机械化的操作的时候执行一个命令任务就能自动执行。

• 项目上线，HTML,CSS,JS文件的压缩合并

• 语法转换（es6-> es5 ,less -> css…）

• 公共文件抽离

• 修改文件浏览器自动刷新

使用

• 使用 npm install gulp 下载 gulp 库文件

  //全局安装 gulp 命令
  npm install gulp -cli -g
  

• 在项目根目录下建立gulpfile.js文件

• 重构项目文件夹结构，src目录放源代码文件，dist目录放构建后的文件

• gulpfile.js文件编写任务

• 在命令行工具中执行gulp任务

  gulp xxx(任务名字)
  

方法

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

相关插件

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

demo代码

gulpfile.js代码

//  引入gulp模块
const gulp = require('gulp')
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
const less = require('gulp-less');
const path = require('path');
const csso = require('gulp-csso');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const pipeline = require('readable-stream').pipeline;

// 使用 gulp.task 建立任务
// 参数 1 任务的名称
// 参数 2 任务的回调函数
gulp.task('first' ,(done) => {
    //  1.使用 gulp.src获取要处理的文件
    gulp.src('./src/public/css/404.css')
        .pipe(gulp.dest('./dist/public/css'))
    done()
})

// html任务
// 1.html文件中代码的压缩
// 2.抽取html代码中的公共代码
gulp.task('htmlmin' , (done) => {
    gulp.src('./src/*.html')
        .pipe(fileinclude())
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest('./dist'))
    done()
})

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

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

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

// 构建任务
gulp.task('default', gulp.series('htmlmin', 'cssmin', 'jsmin', 'copy', (done) => {
    done();
}));