使用gulp+browser-sync搭建前端項目自動化以及自動刷新

前段時間使用了gulp+browser-sync才發現這個東西真的很好用。

準備工做：（1）、安裝nodejs。gulp是基於nodejs使用的，因此先安裝nodejs，https://nodejs.org/en/download/在這裏直接下載安裝就好。

（2）、新建一個項目目錄，好比我在E盤中新建一個文件夾：gulpbrowsersync  。在其中新建一些文件夾或者文件好比style文件夾、js文件夾、images文件夾以及index.html,

 

開始工做：

一、進入項目目錄E:\gulpbrowsersync  中，shift+鼠標右鍵 選擇 在此處打開命令窗口 。建立一個模塊（在命令行中輸入）。

   建立過程當中會提示輸入一些東西，能夠直接回車。

npm init       //建立一個模塊，會在項目目錄中生成一個package.json文件

 

二、安裝gulp（在命令行中輸入）。ps:gulp首先須要全局安裝一次。

npm install gulp -g
npm install gulp --save -dev

 

三、安裝所須要的幾個gulp插件（都是在命令行中輸入）

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                  //文件刪除模塊

 

四、安裝browser-sync（在命令行中輸入）

npm install browser-sync  --save -dev

 

五、在項目根目錄中新建gulpfile.js文件（重要！！！文件名爲固定不變的。）輸入如下內容：

'use strict';


var gulp = require('gulp');                        //獲取gulp
var 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']);

注意1：gulp.src()中爲操做文件的源文件，有須要能夠本身更改；圖片更改中後面的爲匹配的圖片格式，這裏只寫了幾種常見圖片格式，有須要能夠本身增長。

注意2：若是不是less文件而只是css文件，能夠把style中的   .pipe(less())  註釋掉。

六、在以前的命令窗口中輸入

gulp

會出現如下提示

運行完後應該能夠自動打開一個瀏覽器。若是沒有打開也沒有關係，手動打開瀏覽器輸入上面的local地址（即http://localhost:2016）就能夠了。若是是同一個網段的電腦（好比鏈接同一個wifi的筆記本或者手機），能夠輸入上面的External地址（即http://192.168.100.110:2016）也能夠實現自動更新。

 

想一想這邊更新着代碼，那邊電腦自動更新頁面，是否是很炫酷，苦逼前端開發者裝逼必備。

 

最後放一個效果圖。嘻嘻