前端 - gulp应用

说明

• gulp用于搭建小的前后端分离中的前端项目还是挺合适的，如果你不使用诸如Vue、React、AngularJS等提供的脚手架框架，那么使用gulp来做js、css、图片等的压缩合并等处理就非常合适了。
• 诸如gulp的第三方服务年年都有很大的变化，用法上变化也很大，具体用法还需要以最新的官方为准。中文官方地址：https://www.gulpjs.com.cn/
  笔者用到的gulp版本为：4.0.2

使用

1. npm install gulp // 全局安装gulp程序（必须）
2. npm install --save-dev gulp // 将gulp安装到项目中（必须）
3. 在项目根目录下新建gulpfile.js

定义任务

在gulpfile.js中定义定时任务，如下：

const gulp = require('gulp');
const babel = require('gulp-babel');
const less = require('gulp-less');
const minCss = require('gulp-minify-css');
const rename = require('gulp-rename');
const uglify = require('gulp-uglify');
const imagemin = require('gulp-imagemin');

/**
 * 编译js
 * - es6转es5
 * - 压缩
 * - 合并
 * @author Caesar Liu
 * @date 2019/5/25 22:38
 */
gulp.task('compileJs', function(){
    return gulp.src('./src/js/**/*.js')
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest("./dist/js"));
});

/**
 * 编译less
 * - less转css
 * - 压缩
 * @author Caesar Liu
 * @date 2019/5/25 22:50
 */
gulp.task('compileLess', function() {
    return gulp.src('./src/less/**/*.less')
        .pipe(less())
        .pipe(minCss())
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest('./dist/css'))
});

/**
 * 编译图片
 * - 压缩
 * @author Caesar Liu
 * @date 2019/5/25 22:51
 */
gulp.task('compileImages', function() {
    return gulp.src('./src/images/**/*')
        .pipe(imagemin())
        .pipe(gulp.dest('./dist/images'))
});

/**
 * 编译
 * @author Caesar Liu
 * @date 2019/5/26 00:33
 */
gulp.task('compile', gulp.series(gulp.parallel('compileJs', 'compileLess', 'compileImages')));

/**
 * 监听源文件
 * @author Caesar Liu
 * @date 2019/5/25 22:38
 */
gulp.task('watch',function(){
    gulp.watch('./src/js/**/*.js', gulp.parallel('compileJs'));
    gulp.watch('./src/less/**/*.less', gulp.parallel('compileLess'));
    gulp.watch('./src/images/**/*', gulp.parallel('compileImages'));
});

gulp.task('default', gulp.series(gulp.parallel('watch')));

执行

任务定义以后，就可以直接运行gulp来调用定义的default任务，如果需要指定任务执行，就可以使用gulp <task name>来执行选定的任务。

插件的查找和使用

查找：https://www.npmjs.com/search?q=keywords:gulpplugin
使用：点击你需要使用的插件，插件详情会有具体的使用步骤