Gulp

安装配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 安装
npm i -g gulp
npm i --save-dev gulp

// 新建配置文件 package.json
{
    "name": "test",
    "version": "1.0.0"
}

// 新建 gulp 任务文件 gulpfile.js
const gulp = require('gulp');
// 注册任务
gulp.task('taskName', function(){
    // 配置任务
})
// 注册默认任务
gulp.task('default', function(){});

Gulp相关插件

1
2
3
4
5
6
7
8
9
// gulp-concat (js/css) 文件合并
// gulp-uglify 压缩js文件
// gulp-rename 文件重命名
// gulp-less 编译 less
// gulp-clean-css 压缩css
// gulp-htmlmin 压缩html
// gulp-livereload 实时自动编译刷新
// gulp-connect  全自动项目构建
// open 打开指定链接

构建 JS 任务

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 安装相关插件
npm i gulp-concat gulp-uglify gulp-rename --save-dev

const concat = require('gulp-concat')
const uglify = require('gulp-uglify')
const rename = require('gulp-rename')
// 注册合并压缩 js 的任务
gulp.task('concatJs', function () {  
    return gulp.src('src/js/*.js') // 找到源文件读取到gulp内存 深层 src/js/**/*.js
        .pipe(concat('build.js'))  // 临时合并文件
        .pipe(gulp.dest('dist/js/')) // 输出合并文件到本地
        .pipe(uglify())  // 压缩文件
        .pipe(rename({suffix: '.min'}))  // 重命名 可以直接传入 build.min.js 或者一个对象 {suffix 后缀名} 
        .pipe(gulp.dest('dist/js/'))  // 输出压缩后的文件到本地
        .pipe(livereload()) // 配置热更新
})

// 执行任务命令
gulp concatJs

构建 less 任务

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 安装编译 压缩 less 的插件
npm i gulp-less gulp-clean-css --save-dev

const less = require('gulp-less')
// 注册转换less的任务
gulp.task('less', function(){
    return gulp.src('src/less/*.less') // 获取less文件
        .pipe(less())  // 转换 less 文件
        .pipe(gulp.dest('src/css/')) // 输出转换后的 css 文件
        .pipe(livereload()) // 配置热更新
})


const cssClean = require('gulp-clean-css')
// 注册合并压缩css文件
gulp.task('concatCss', function() {
    return gulp.src('src/css/*.css') // 找到源文件
        .pipe(concat('build.css')) // 合并 css
        .pipe(rename({suffix: '.min'})) // 重命名
        .pipe(cssClean({compatibility: 'ie8'})) // 压缩 css 兼容ie8
        .pipe(gulp.dest('src/css/'))  // 输出
        .pipe(livereload()) // 配置热更新
})

压缩 html

1
2
3
4
5
6
7
8
9
10
11
12
// 安装 引入
npm i gulp-htmlmin --save-dev

const htmlMin = require('gulp-htmlmin')
// 压缩 html 任务
gulp.task('html', function(){
    return gulp.src('index.html')
        .pipe(htmlMin({collapseWhitespace: true}))  // 清除空格
        .pipe(gulp.dest('dist/'))
        .pipe(livereload()) // 配置热更新
})

同步或异步构建全部任务

  • gulp.series('a','b','c')同步执行
  • gulp.parallel('d','e','f')异步执行
    1
    2
    3
    4
    5
    6
    // 注册默认任务 执行全部 task
    gulp.task('default', gulp.parallel(gulp.series('concatJs', 'less'), 'concatCss', (done)=>{
        console.log("yes completed")
        done();
    }));

自动编译构建监听文件变化热更新

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 安装 引入 相关插件
npm i gulp-livereload --save-dev
const livereload = require()

// 自动编译热更新
const livereload = require('gulp-livereload')
// 注册监视任务
gulp.task('watch', gulp.series('default', function (){  
    livereload.listen();
    gulp.watch('src/js/*.js', gulp.series('concatJs'))
    gulp.watch('src/css/*.css', gulp.series('concatCss'));

}))

// 开启监听命令
gulp watch

全自动项目构建

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
npm i gulp-connect --save-dev
const connect = require('gulp-connect');

gulp.task('server', function(){
    // 配置服务器选项
    connect.server({
        root: 'dist/',
        livereload: true, // 实时刷新
        port: 5000  // 端口
    });

    // 安装open插件还可以自动打开指定链接
    // open('http://localhost:5000/')
})

// 需要在每个任务添加配置
.pipe(connect.reload())

// 执行任务命令
> gulp server

打包加载 gulp 插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 安装
npm i gulp-load-plugins
const $ = require('gulp-load-plugins')(); // 返回一个对象
// 该对象包含所有使用的gulp插件
// 无需额外引入其他插件
// 直接使用
$.concat()  // => gulp-concat    
$.uglify()  // => gulp-uglify
$.rename()  // => gulp-rename
$.less()  // => gulp-less
$.cleanCss()  // => gulp-clean-css
$.htmlmin()  // => gulp-htmlmin
$.livereload()  // => gulp-livereload
$.connect()  // => gulp-connect  
$.open()  // =>