gulp备忘

// npm install gulp gulp-sourcemaps gulp-name gulp-notify del --save-dev
// npm install  gulp-ruby-sass gulp-autoprefixer  gulp-minify-css  --save-dev
// npm install jshint gulp-jshint gulp-concat gulp-uglify --save-dev
// npm install gulp-imagemin gulp-cache --save-dev


var gulp = require('gulp'),
    
    //style
    sass = require('gulp-ruby-sass'),//编译sass
    autoprefixer = require('gulp-autoprefixer'), //自动添加css前缀
    rename = require('gulp-rename'), //重命名
    minifycss = require('gulp-minify-css'), //压缩css
    
    //js
    jshint = require('gulp-jshint'),  //js代码校验
    concat = require('gulp-concat'), //合并js文件
    uglify = require('gulp-uglify'), //压缩js代码

    //image
    imagemin = require('gulp-imagemin'),  //压缩图片
    cache = require('gulp-cache'),//图片缓存，只有图片替换了才压缩

    //其他
    sourcemaps = require('gulp-sourcemaps'),
    notify = require('gulp-notify'), //更改提醒
    livereload = require('gulp-livereload'), //自动刷新页面
    del = require('del')



/**
 * 样式
 * 1、scss编译
 * 2、添加css前缀
 * 3、压缩css
 */
gulp.task('styles',function(){
    return sass('project/scss/**/*.scss', {sourcemap: true,style:'expanded'})
            .on('error', sass.logError)
            .pipe(sourcemaps.write())
            .pipe(autoprefixer({ browsers: ['last 2 versions','safari 5','> 5%','Firefox > 20','ie 6-8','ios 6', 'android 4'] }))
            // .pipe(rename({suffix: '.min'}))
            // .pipe(minifycss())   //重命名压缩css
            .pipe(gulp.dest('project/dist/css'))
            // .pipe(notify("styles 编译完成!"));
});

/**
 * js
 * 1、js代码校验
 * 2、合并js
 * 3、压缩
 */
gulp.task('scripts', function() {
  return gulp.src('project/js/**/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(sourcemaps.init())
    .pipe(concat('main.js'))  //合并js生成文件为：main.js
    .pipe(sourcemaps.write())
    // .pipe(rename({suffix: '.min'}))
    // .pipe(uglify())  //重命名压缩js
    .pipe(gulp.dest('project/dist/js'))
    // .pipe(notify("scripts 编译完成!"));
});

/**
 * images
 * 1、图像压缩
 * 2、图片缓存，只有图片替换了才压缩
 * 
 */
gulp.task('images',function(){
    return gulp.src('project/images/**/*')
        .pipe(cache(imagemin({
            optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
            progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
            interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
            multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化
        })))
        .pipe(gulp.dest('project/dist/images'))
        // .pipe(notify("images 编译完成!"));
});

// Clean dist的文件
gulp.task('clean', function(cb) {
    del(['project/dist/**/*']).then(paths => {
        console.log('删除文件列表如下:\n', paths.join('\n'));
    });
});


gulp.task('watch',function(){
    // 监控style文件
    gulp.watch('project/scss/**/*.scss',['styles']);
    // 监控script文件
    gulp.watch('project/js/**/*.js',['scripts']);
    // 监控images文件
    gulp.watch('project/images/**/*',['images']);

    livereload.listen();
    gulp.watch(['project/dist/**']).on('change',livereload.changed);
});

gulp.task('default',function(){
    gulp.start('styles','scripts','images');
});

 

参考文章：https://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B/