Gulp编译、合并、压缩，以及Browsersync实时刷新教程

之前项目中一直用的都是gulp-livereload，用gulp-webserver启服务器，来实现浏览器实时刷新，但是每一次更新代码重新编译有点慢。之后各种找原因改解决方案。

方案一：加入gulp-changed来监测文件是否改变过，如更改了index.less，只编译less。

方案二：不实时编译所有文件，只编译less文件，将目标目录放到项目目录内，项目上线之前在执行一次压缩合并的过程。

最终确定了如上两种方案，执行起来也只是快那么一丢丢，所以将之前看到过的Browsersync引入试试，一顿研究之后发现速度真快的可以！不仅快，Browsersync还有一个非常好用的功能：设备同步。当你的电脑和手机或者ipad连的相同wifi，可以在移动设备上访问相同ip相同端口，即可实现多设备同步。真的是同步哦，比如在pc端向下滚动了页面，其他设备也会一起滚动。或者更新了代码，所有设备都会实时刷新。

注意：此教程仅适用于较小的个人负责项目，并且开发目录结构与输出目录结构要相同，防止编译后资源路径找不到。

注二：我的机器为win10，webstorm可以自动保存代码，每次更新代码后ctrl+tab切换回浏览器就可以看见渲染结果，不用ctrl+s，不用f5，没有等待时间，不用手动打包，浏览器看见结果测试一下就可以直接发布上线。如果你也喜欢这样的开发模式，请仔细阅读下文内容。完整代码点击这里下载。

一、创建项目目录Landing、新建index.html，新建src文件夹，在src内新建images、less、js文件夹。

二、在根目录创建package.json，根据需要删减依赖

三、安装依赖（两种方法）

1、按需配置好package.json 在根目录npm install即可。

2、在根目录npm install gulp gulp-concat gulp-clean-css gulp-uglify gulp-imagemin imagemin-pngquant gulp-htmlmin gulp-changed gulp-less del browser-sync --save-dev。有了package.json后，下一次使用按照第一步操作即可。

四、创建gulpfile.js，按需编写你需要的配置。代码如下。

-------------------------------------------------------------------------------------------------------------------------------------------

2017.6.9修改：当前配置存在一个弊端，每一次运行gulp指令时，会将dist目录下全部删除，然后执行images，因此弹出页面之后由于图片还没有编译移动完成，页面需等待很久才能正常显示。故改动以下几个位置：

1：delete任务添加 ' 排除images ' 文件夹，即运行gulp时执行delete任务删除文件夹时保留images文件夹。

2：去掉省略布尔值和删除空格属性，项目中有些view切换可能会受影响。

3：gulp默认任务里，server.start将不执行images，防止第二次编译images。这样能保证每次跑项目第一时间看到页面的渲染情况，无需等待。而且每当加入新图片时，会执行images将图片移动到指定文件夹。

PS：下方代码为修改后代码

---------------------------------------------------------------------------------------------------------------------------------------------

var gulp     = require('gulp'),
    concat   = require('gulp-concat'),//- 多个文件合并为一个；
    cleanCSS = require('gulp-clean-css'),//- 压缩CSS为一行；
    ugLify   = require('gulp-uglify'),//压缩js
    imageMin = require('gulp-imagemin'),//压缩图片
    pngquant = require('imagemin-pngquant'), // 深度压缩
    htmlMin  = require('gulp-htmlmin'),//压缩html
    changed  = require('gulp-changed'),//检查改变状态
    less     = require('gulp-less')//压缩合并less
    del      = require('del')
    browserSync = require("browser-sync").create();//浏览器实时刷新

//删除dist下的所有文件
gulp.task('delete',function(cb){
    return del(['dist/*','!dist/images'],cb);
})

//压缩html
gulp.task('html', function () {
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS
    };
    gulp.src('src/index.html')
        .pipe(changed('dist', {hasChanged: changed.compareSha1Digest}))
        .pipe(htmlMin(options))
        .pipe(gulp.dest('dist'))
        .pipe(browserSync.reload({stream:true}));
});

//实时编译less
gulp.task('less', function () {
    gulp.src(['./src/less/*.less']) //多个文件以数组形式传入
        .pipe(changed('dist/css', {hasChanged: changed.compareSha1Digest}))
        .pipe(less())//编译less文件
        .pipe(concat('main.css'))//合并之后生成main.css
        .pipe(cleanCSS())//压缩新生成的css
        .pipe(gulp.dest('dist/css'))//将会在css下生成main.css
        .pipe(browserSync.reload({stream:true}));
});

//压缩js
gulp.task("script",function(){
    gulp.src(['src/js/jquery-3.1.0.min.js', 'src/js/index.js'])
        .pipe(changed('dist/js', {hasChanged: changed.compareSha1Digest}))
        .pipe(concat('index.js'))
        .pipe(ugLify())
        .pipe(gulp.dest('dist/js'))
        .pipe(browserSync.reload({stream:true}));
});

// 压缩图片
gulp.task('images', function () {
    gulp.src('./src/images/*.*')
        .pipe(changed('dist/images', {hasChanged: changed.compareSha1Digest}))
        .pipe(imageMin({
            progressive: true,// 无损压缩JPG图片
            svgoPlugins: [{removeViewBox: false}], // 不移除svg的viewbox属性
            use: [pngquant()] // 使用pngquant插件进行深度压缩
        }))
        .pipe(gulp.dest('dist/images'))
        .pipe(browserSync.reload({stream:true}));
});

//启动热更新
gulp.task('serve', ['delete'], function() {
    gulp.start('script','less','html');
    browserSync.init({
        port: 2017,
        server: {
            baseDir: ['dist']
        }
    });
    gulp.watch('src/js/*.js', ['script']);         //监控文件变化，自动更新
    gulp.watch('src/less/*.less', ['less']);
    gulp.watch('src/*.html', ['html']);
    gulp.watch('src/images/*.*', ['images']);
});

gulp.task('default',['serve']);

五、在根目录命令行里执行gulp，会自动启动浏览器并打开端口为2017的网页。在配置符合需求的情况下，接下来你的工作就只剩下开发了。最后只用把dist目录打包发布一切ok！