前段時(shí)間使用了gulp+browser-sync才發(fā)現(xiàn)這個(gè)東西真的很好用。
準(zhǔn)備工作：（1）、安裝nodejs寥院。gulp是基于nodejs使用的卒煞，所以先安裝nodejs幕袱，https://nodejs.org/en/download/在這里直接下載安裝就好。
（2）、新建一個(gè)項(xiàng)目目錄，比如我在E盤中新建一個(gè)文件夾：gulpbrowsersync 蠕嫁。在其中新建一些文件夾或者文件比如style文件夾、js文件夾毯盈、images文件夾以及index.html,
開始工作：
1剃毒、進(jìn)入項(xiàng)目目錄E:\gulpbrowsersync 中，shift+鼠標(biāo)右鍵 選擇 在此處打開命令窗口 搂赋。創(chuàng)建一個(gè)模塊（在命令行中輸入）赘阀。
創(chuàng)建過(guò)程中會(huì)提示輸入一些東西，可以直接回車脑奠。
npm init //創(chuàng)建一個(gè)模塊纤壁，會(huì)在項(xiàng)目目錄中生成一個(gè)package.json文件
2、安裝gulp（在命令行中輸入）捺信。ps:gulp首先需要全局安裝一次。
npm install gulp -gnpm install gulp --save -dev
3欠痴、安裝所需要的幾個(gè)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、在項(xiàng)目根目錄中新建gulpfile.js文件（重要＠伞Ｕ浦俊！文件名為固定不變的菩咨。）輸入以下內(nèi)容：
- {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()); //文件有更新自動(dòng)執(zhí)行});?//操作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, //壓縮頁(yè)面js minifyCSS:true //壓縮頁(yè)面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']); //監(jiān)控文件變化吠式，自動(dòng)更新 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
會(huì)出現(xiàn)以下提示 - {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;">
運(yùn)行完后應(yīng)該可以自動(dòng)打開一個(gè)瀏覽器懊纳。如果沒有打開也沒有關(guān)系揉抵，手動(dòng)打開瀏覽器輸入上面的local地址（即http://localhost:2016）就可以了。如果是同一個(gè)網(wǎng)段的電腦（比如連接同一個(gè)wifi的筆記本或者手機(jī)）嗤疯，可以輸入上面的External地址（即http://192.168.100.110:2016）也可以實(shí)現(xiàn)自動(dòng)更新冤今。
