Gulp

Gulp:任务自动构建管理工具。
可以通过自动执行常见的任务，比如预编译css，压缩JavaScript和刷新浏览器，来改进网站开发的过程。Gulp本身虽然不能完成很多任务，但是有大量的插件可用。性能优化、文件合并、文件压缩、效率提升。
基础环境:需要安装node。
安装:Gulp需要全局安装，然后在项目的开发目录中安装为本地模块。
全局安装命令:npm install gulp -g
使用:
初始化一个项目，进入项目的目录。cnpm init 一直回车即可。完成之后会在项目的文件夹下产生一个package.json的文件。如下图所示。

在当前文件目录下执行cmd命令: cnpm install gulp --save-dev。安装完成之后会产生一个node_modules文件
注意：全局安装gulp，项目也安装gulp。全局安装gulp是为了执行gulp任务，本地安装是为了调用gulp插件的功能。
新建gulpfile.js文件(重要)
1.说明: gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件。
2.js文件

//导入工具包 require('node_modules里对应模块')
var gulp =require('gulp'),
//本地安装gulp所用到的地方
less = require('gulp-less');
//定义一个testLess任务（自定义任务名称）
gulp.task('testLess',function(){
    gulp.src('src/less/index.less')
//该任务针对的文件
.pipe(less())
//该任务调用的模块
.pipe(gulp.dest('src/css'));
//将会在src/css下生成index.css
});
gulp.task('default',['testLess','elseTask']);
//定义默认任务
//gulp.task(name[, deps], fn) 定义任务  name：任务名称 deps：依赖任务名称 fn：回调函数
//gulp.src(globs[, options]) 执行任务处理的文件  globs：处理的文件路径(字符串或者字符串数组)
//gulp.dest(path[, options]) 处理完后文件生成路径

加载htmlmin模块

var htmlmin = require('gulp-htmlmin');
gulp.task('html',function(){
    gulp.src('*.html')
    .pipr(htmlmin({
        collapseWhitespace : true,
        removeComments : true
    }))
    //最后把你建立的html文件压缩到自动创建的dist文件里;
    .pipe(gulp.dest('dist'))
})

如果使用sass预编译的css，gulp预处理sass

var scss = require('gulp-sass');
var cssnano = require('gulp-cssnano');
//因为我用的是scss,所以这里注册任务写成了scss;
gulp.task('scss',function(){
    gulp.src('*.scss')
    .pipe(scss())
    .pipe(gulp.dest("dist"))
    .pipe(cssnano())
    .pipe(gulp.dest('dist/css'))
});

处理图片

var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
gulp.task('image',function(){
    gulp.src('img/*.{jpg,pnp,gif}')//要处理的图片目录为img目录下的所有的.jpg .png .gif 格式的图片;
    .pipe(cache(imagemin({
        progressive : true,//是否渐进的优化
        svgoPlugins : [{removeViewBox:false}],//svgo插件是否删除幻灯片
        interlaced : true //是否各行扫描
    })))
    .pipe(gulp.dest('dist/img'))
});

加载js丑化模块

var uglify = require('gulp-uglify');
gulp.task('js',function(){
    gulp.src('js/*.js')
    .pipe(uglify())
    .pipe(gulp.dist('dist/js'))
});

监听编写文件，实时改变压缩到文件夹里的代码

gulp.task('watch',['scss','js','html','image'],function(){
    gulp.watch('*.scss',['scss']);
    gulp.watch('js/*.js',['js']);
    gulp.watch('img/*.*',['image']);
    gulp.watch('*.html',['html']);
})

最全配置

var gulp = require("gulp"),                         // gulp主组件
    babel = require('gulp-babel'),                  // 编译es6
    sass = require('gulp-sass'),                    // 编译sass
    cssmin = require('gulp-clean-css'),             // 压缩css文件
	uglify = require("gulp-uglify"),		        // 压缩丑化js文件
	imagemin = require('gulp-tinypng-nokey'),       // 压缩图片
	htmlmin = require('gulp-htmlmin'),              // 压缩html文件
    zip = require('gulp-zip'),                      // 打包成压缩文件
    rev = require('gulp-rev'),                      // 对文件名加MD5后缀
    revCollector = require('gulp-rev-collector'),   // 替换被gulp-rev改名的文件名
    copy = require('gulp-copy'),                    // 拷贝文件
    watch = require('gulp-watch'),                  // 监听文件
    browserSync = require('browser-sync').create(), // 自动刷新文件
	runSequence = require('run-sequence');          // 按顺序执行



//先编译es6,再压缩js
gulp.task('compress_js',function(){
    return gulp.src(['./begin_file/js/*.js','!./begin_file/js/*.min.js'])   // 获取.js文件，同时过滤掉.min.js文件
        .pipe(babel())          // 编译es6
        // .pipe(uglify({preserveComments:'some'}))    // 使用uglify进行压缩，并保留部分注释
        .pipe(uglify())         // 压缩js
        .pipe(browserSync.reload({stream:true}))       // 实时刷新
        .pipe(rev())            // 给文件添加hash编码    
        .pipe(gulp.dest('./after_file/js'))
        .pipe(rev.manifest())   // 生成rev-mainfest.json文件作为记录
        .pipe(gulp.dest('./after_file/js'))
});


// JS生成文件hash编码并生成 rev-manifest.json文件名对照映射  
gulp.task('revHtmlJs', function () {
    return gulp.src(['./after_file/js/*.json', './after_file/index.html'])
        .pipe(revCollector())  // 替换html中对应的记录  
        .pipe(gulp.dest('after_file/'))
});


// 先编译sass,再压缩css
gulp.task('compress_sass', function(){
    return gulp.src(['./begin_file/css/*.css','./begin_file/css/*.scss','!./begin_file/css/*.min.css'])
        .pipe(sass())          // 编译sass
        .pipe(cssmin())        // 压缩css
        .pipe(browserSync.reload({stream:true}))       // 实时刷新
        .pipe(rev())           // 给文件添加hash编码   
        .pipe(gulp.dest('./after_file/css'))
        .pipe(rev.manifest())  // 生成rev-mainfest.json文件作为记录
        .pipe(gulp.dest('./after_file/css'))
});


// CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revHtmlCss', function () {
    return gulp.src(['./after_file/css/*.json', './after_file/index.html'])  
        .pipe(revCollector())  // 替换html中对应的记录 
        .pipe(gulp.dest('./after_file/'))
}); 


// 图片压缩
gulp.task('compress_img', function () {      
    gulp.src('./begin_file/img/*.{png,jpg,jpeg,gif,ico}')
        .pipe(imagemin())
        .pipe(gulp.dest('./after_file/img/'))
        .pipe(browserSync.reload({stream:true}));      // 实时刷新
});


// 压缩html文件
gulp.task('compress_html', function() {
    return gulp.src('./begin_file/*.html')
        .pipe(htmlmin())
        .pipe(gulp.dest('./after_file/'))
        .pipe(browserSync.reload({stream:true}));      // 实时刷新
});


// *.min.*压缩文件直接复制
gulp.task('copy',function () {
    gulp.src('./begin_file/js/*.min.js')
        .pipe(gulp.dest('./after_file/js/'))
    gulp.src('begin_file/css/*.min.css')
        .pipe(gulp.dest('./after_file/css/'))   
});


// 压缩整个gulp后的文件(丢给后台上线用)
gulp.task('compress_zip',function () {
    gulp.src('./after_file/**')
        .pipe(zip('backup.zip'))
        .pipe(gulp.dest('./after_file/'))
});



// 开发用(监听、刷新)
gulp.task('dev', function() {

    browserSync.init({                 // 启动Browsersync服务,实时刷新
        server: {
            baseDir: './after_file',   // 启动服务的目录 默认 index.html    
            index: 'index.html'        // 自定义启动文件名
        },
        port:8051,                     // 指定访问服务器的端口号
        open: 'external',              // 决定Browsersync启动时自动打开的网址 external 表示 可外部打开 url, 可以在同一 wifi 下不同终端测试
        injectChanges: true            // 注入CSS改变
    });

    // 监听文件变化，执行相应任务
    gulp.watch('./begin_file/**/*.js', ['compress_js']);
    gulp.watch('./begin_file/**/*.html', ['compress_html']);
    gulp.watch('./begin_file/**/*.css', ['compress_sass']);
    gulp.watch('./begin_file/**/*.scss', ['compress_sass']);
    gulp.watch('./begin_file/**/*.{png,jpg,gif,ico}', ['compress_img']);

})



// 测试或上线用(压缩、打包)
gulp.task('build', function (done) {

    condition = false;
    runSequence(
        'compress_js',
        'compress_sass',
        'compress_img',
        'compress_html',
        'copy',
        'revHtmlJs',
        'revHtmlCss',
        'compress_zip',
    done);
    
});