前段时间使用了gulp+browser-sync才发现这个东西真的很好用。
准备工作：（1）、安装nodejs。gulp是基于nodejs使用的，所以先安装nodejs，https://nodejs.org/en/download/在这里直接下载安装就好。
（2）、新建一个项目目录，比如我在E盘中新建一个文件夹：gulpbrowsersync 。在其中新建一些文件夹或者文件比如style文件夹、js文件夹、images文件夹以及index.html,
开始工作：
1、进入项目目录E:\gulpbrowsersync 中，shift+鼠标右键 选择 在此处打开命令窗口 。创建一个模块（在命令行中输入）。
创建过程中会提示输入一些东西，可以直接回车。
npm init //创建一个模块，会在项目目录中生成一个package.json文件
2、安装gulp（在命令行中输入）。ps:gulp首先需要全局安装一次。
npm install gulp -gnpm install gulp --save -dev
3、安装所需要的几个gulp插件（都是在命令行中输入）
- {failImgCache = [];}if(failImgCache.indexOf(src) == -1 && src.trim().length){failImgCache.push(src);}$(this).closest('.md-image').addClass('md-img-error').removeClass('md-img-loaded'); " onload="var src = window.removeLastModifyQuery(this.getAttribute('src'));if(!src.trim()) return;if(loadedImgCache.indexOf(src) == -1 && src.trim().length){loadedImgCache.push(src);}$(this).closest('.md-image').addClass('md-img-loaded').removeClass('md-img-error');" style="box-sizing: border-box; border-width: 0px 4px 0px 2px; border-top-style: initial; border-right-style: solid; border-bottom-style: initial; border-left-style: solid; border-top-color: initial; border-right-color: transparent; border-bottom-color: initial; border-left-color: transparent; border-image: initial; vertical-align: middle; max-width: 100%; cursor: pointer;">
npm install gulp-uglify --save -dev //js压缩插件npm install gulp-concat --save -dev //js合并插件npm install gulp-cssnano --save -dev //css压缩插件npm install gulp-less --save -dev //less文件编译 npm install gulp-imagemin --save -dev //图片压缩插件npm install gulp-htmlmin --save -dev //html压缩插件npm install del --save -dev //文件删除模块 - {failImgCache = [];}if(failImgCache.indexOf(src) == -1 && src.trim().length){failImgCache.push(src);}$(this).closest('.md-image').addClass('md-img-error').removeClass('md-img-loaded'); " onload="var src = window.removeLastModifyQuery(this.getAttribute('src'));if(!src.trim()) return;if(loadedImgCache.indexOf(src) == -1 && src.trim().length){loadedImgCache.push(src);}$(this).closest('.md-image').addClass('md-img-loaded').removeClass('md-img-error');" style="box-sizing: border-box; border-width: 0px 4px 0px 2px; border-top-style: initial; border-right-style: solid; border-bottom-style: initial; border-left-style: solid; border-top-color: initial; border-right-color: transparent; border-bottom-color: initial; border-left-color: transparent; border-image: initial; vertical-align: middle; max-width: 100%; cursor: pointer;">
4、安装browser-sync（在命令行中输入）
npm install browser-sync --save -dev
5、在项目根目录中新建gulpfile.js文件（重要！！！文件名为固定不变的。）输入以下内容：
- {failImgCache = [];}if(failImgCache.indexOf(src) == -1 && src.trim().length){failImgCache.push(src);}$(this).closest('.md-image').addClass('md-img-error').removeClass('md-img-loaded'); " onload="var src = window.removeLastModifyQuery(this.getAttribute('src'));if(!src.trim()) return;if(loadedImgCache.indexOf(src) == -1 && src.trim().length){loadedImgCache.push(src);}$(this).closest('.md-image').addClass('md-img-loaded').removeClass('md-img-error');" style="box-sizing: border-box; border-width: 0px 4px 0px 2px; border-top-style: initial; border-right-style: solid; border-bottom-style: initial; border-left-style: solid; border-top-color: initial; border-right-color: transparent; border-bottom-color: initial; border-left-color: transparent; border-image: initial; vertical-align: middle; max-width: 100%; cursor: pointer;">
'use strict';var gulp = require('gulp'); //获取gulpvar browsersync = require('browser-sync').create();//获取browsersync//删除dist目录下文件var del=require('del');gulp.task('clean',function(cb){ return del(['dist/'],cb);})//操作js文件var uglify = require('gulp-uglify'); //js压缩插件var concat = require('gulp-concat'); //js合并插件gulp.task('scripts', function() { gulp.src('js/.js') //需要操作的源文件 .pipe(uglify()) //压缩js文件 .pipe(concat('app.js')) //把js文件合并成app.js文件 .pipe(gulp.dest('dist/js')) //把操作好的文件放到dist/js目录下 .pipe(browsersync.stream()); //文件有更新自动执行});//操作css文件var cssnano = require('gulp-cssnano'); //css压缩插件var less=require('gulp-less') //less文件编译gulp.task('style', function() { gulp.src('style/.css') .pipe(less()) //编译less文件 .pipe(cssnano()) //css压缩 .pipe(gulp.dest('dist/style')) .pipe(browsersync.stream());});var imagemin = require('gulp-imagemin'); //图片压缩插件gulp.task('image', function() { gulp.src('images/.{png,jpg,jpeg,gif}') .pipe(imagemin()) .pipe(gulp.dest('dist/images')) .pipe(browsersync.stream());});var htmlmin = require('gulp-htmlmin'); //html压缩插件gulp.task('html', function() { gulp.src('.html') .pipe(htmlmin({ collapseWhitespace: true, //压缩html collapseBooleanAttributes: true, //省略布尔属性的值 removeComments: true, //清除html注释 removeEmptyAttributes: true, //删除所有空格作为属性值 removeScriptTypeAttributes: true, //删除type=text/javascript removeStyleLinkTypeAttributes: true, //删除type=text/css minifyJS:true, //压缩页面js minifyCSS:true //压缩页面css })) .pipe(gulp.dest('dist')) .pipe(browsersync.stream());});gulp.task('serve', ['clean'], function() { gulp.start('scripts','style','image','html'); browsersync.init({ port: 2016, server: { baseDir: ['dist'] } }); gulp.watch('js/.js', ['scripts']); //监控文件变化，自动更新 gulp.watch('style/.css', ['style']); gulp.watch('images/.', ['image']); gulp.watch('.html', ['html']);});gulp.task('default',['serve']); - {failImgCache = [];}if(failImgCache.indexOf(src) == -1 && src.trim().length){failImgCache.push(src);}$(this).closest('.md-image').addClass('md-img-error').removeClass('md-img-loaded'); " onload="var src = window.removeLastModifyQuery(this.getAttribute('src'));if(!src.trim()) return;if(loadedImgCache.indexOf(src) == -1 && src.trim().length){loadedImgCache.push(src);}$(this).closest('.md-image').addClass('md-img-loaded').removeClass('md-img-error');" style="box-sizing: border-box; border-width: 0px 4px 0px 2px; border-top-style: initial; border-right-style: solid; border-bottom-style: initial; border-left-style: solid; border-top-color: initial; border-right-color: transparent; border-bottom-color: initial; border-left-color: transparent; border-image: initial; vertical-align: middle; max-width: 100%; cursor: pointer;">
注意1：gulp.src()中为操作文件的源文件，有需要可以自己更改；图片更改中后面的为匹配的图片格式，这里只写了几种常见图片格式，有需要可以自己增加。
注意2：如果不是less文件而只是css文件，可以把style中的 .pipe(less()) 注释掉。
6、在之前的命令窗口中输入
gulp
会出现以下提示 - {failImgCache = [];}if(failImgCache.indexOf(src) == -1 && src.trim().length){failImgCache.push(src);}$(this).closest('.md-image').addClass('md-img-error').removeClass('md-img-loaded'); " onload="var src = window.removeLastModifyQuery(this.getAttribute('src'));if(!src.trim()) return;if(loadedImgCache.indexOf(src) == -1 && src.trim().length){loadedImgCache.push(src);}$(this).closest('.md-image').addClass('md-img-loaded').removeClass('md-img-error');" style="box-sizing: border-box; border-width: 0px 4px 0px 2px; border-top-style: initial; border-right-style: solid; border-bottom-style: initial; border-left-style: solid; border-top-color: initial; border-right-color: transparent; border-bottom-color: initial; border-left-color: transparent; border-image: initial; vertical-align: middle; max-width: 100%; cursor: default;">
运行完后应该可以自动打开一个浏览器。如果没有打开也没有关系，手动打开浏览器输入上面的local地址（即http://localhost:2016）就可以了。如果是同一个网段的电脑（比如连接同一个wifi的笔记本或者手机），可以输入上面的External地址（即http://192.168.100.110:2016）也可以实现自动更新。
