// 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-devvar 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/