《打包系列|gulp配置篇》

gulp用的也不是很熟，他和rollup不一样，是用的commonJS规范编写配置。
配置文件叫做gulpfile.js, 他的特点就是流式编写配置。通过定义一些列任务
然后组合进行打包. 通过npm i gulp -g安装

下面是一个网上别人写的gulp的配置

不过我没有验证是否正确,但是其实配置就那么回事，在npm源里一个一个的查插件吧
都webpack过来的，需要哪些插件都是知道的，不过就是插件前缀名字叫gulp-xxx就好了

	let gulp = require('gulp');
    let sass = require('gulp-sass');  // sass -> css
    let prefixer = require('gulp-autoprefixer');  // 增加前缀
    let minify = require('gulp-minify-css');  // css 压缩
    let notify = require('gulp-notify');  // 打印提醒语句
    let concat = require('gulp-concat');  // 合并
    let gulp = require('gulp');
    let imagemin = require('gulp-imagemin');
    let cache = require('gulp-cache');  // 减少重复压缩

    // 检查脚本
    gulp.task('lint', function() {
        gulp.src('./static/src/js/*.js')
            .pipe(jshint())
            .pipe(jshint.reporter('default'))
    });

    // 编译Sass
    // 编译Sass
    gulp.task('css', function() {  // 任务名
        gulp.src('sass/*.scss')  // 目标 sass 文件
            .pipe(sass())  // sass -> css
            .pipe(prefixer('last 2 versions'))  // 参数配置参考 <https://github.com/ai/browserslist>
            .pipe(minify())  // 压缩
            .pipe(gulp.dest('css'))  // 目标目录
            .pipe(notify({message: 'done'}))
            .pipe(concat('all.min.css'))  // 合并
            .pipe(gulp.dest('css'));  // 目标目录
    });

    // 压缩图片
    gulp.task('imagemin', function() {
        gulp.src('src/images/*')
            .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
            .pipe(gulp.dest('dist/images/'));
    });

    // 合并，压缩js文件
    gulp.task('scripts', function() {
        gulp.src('./static/src/js/*.js')
            .pipe(concat('all.js'))  // 合并
            .pipe(gulp.dest('./static/dist/js'))
            .pipe(rename('all.min.js'))
            .pipe(uglify())
            .pipe(gulp.dest('./static/dist/js'));
    });

    // 默认任务
    gulp.task('default', function(){
        gulp.run('lint', 'sass','imagemin', 'scripts');

        // 监听文件变化
        gulp.watch([
            './static/src/scss/*.scss',
            './static/src/images/**',
            './static/src/js/*.js'
        ], function(){
            gulp.run('lint', 'sass','imagemin', 'scripts');
        });
    });
复制代码

这是代码

gulp配置代码