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

前段時間使用了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 -g
npm install gulp --save -dev

 

3、安裝所需要的幾個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                  //文件刪除模塊

 

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

npm install browser-sync  --save -dev

 

5、在項目根目錄中新建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())  注釋掉。

6、在之前的命令窗口中輸入

gulp

會出現以下提示

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

 

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

 

最后放一個效果圖。嘻嘻