前端自動化部署之gulp

1.首先須要安裝node+npm（這裏再也不敘述，網上教程一大堆）

2.gulp全局安裝：npm install -g gulp

3.cd進入到你的項目目錄，這裏使用demo文件夾爲個人示例項目

4.在demo項目中新建dist和src兩個文件夾，再在src文件夾下新建images，sass，js三個文件夾和index.html文件

5.命令行cd進入到項目根目錄，在項目中安裝gulp模塊，npm install gulp

6.安裝gulp相關須要模塊

npm install gulp-util gulp-imagemin gulp-ruby-sass gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-livereload tiny-lr

關於各模塊介紹及鏈接（也可經過gulp plugins，尋找相應功能的gulp模塊）：

gulp-imagemin: 壓縮圖片
gulp-ruby-sass: 支持sass
gulp-minify-css: 壓縮css
gulp-jshint: 檢查js
gulp-uglify: 壓縮js
gulp-concat: 合併文件
gulp-rename: 重命名文件
gulp-htmlmin: 壓縮html
gulp-clean: 清空文件夾
gulp-livereload: 服務器控制客戶端同步刷新（需配合chrome插件LiveReload及tiny-lr）

6.安裝後在項目根目錄下新建gulpfile.js文件，插入如下代碼：

/**
 * 組件安裝
 * npm install gulp-util gulp-imagemin gulp-ruby-sass gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-livereload tiny-lr --save-dev
 */

// 引入 gulp及組件
var gulp    = require('gulp'),                 //基礎庫
    imagemin = require('gulp-imagemin'),       //圖片壓縮
    sass = require('gulp-ruby-sass'),          //sass
    minifycss = require('gulp-minify-css'),    //css壓縮
    jshint = require('gulp-jshint'),           //js檢查
    uglify  = require('gulp-uglify'),          //js壓縮
    rename = require('gulp-rename'),           //重命名
    concat  = require('gulp-concat'),          //合併文件
    clean = require('gulp-clean'),             //清空文件夾
    tinylr = require('tiny-lr'),               //livereload
    server = tinylr(),
    port = 35729,
    livereload = require('gulp-livereload');   //livereload

// HTML處理
gulp.task('html', function() {
    var htmlSrc = './src/*.html',
        htmlDst = './dist/';

    gulp.src(htmlSrc)
        .pipe(livereload(server))
        .pipe(gulp.dest(htmlDst))
});

// 樣式處理
gulp.task('css', function () {
    var cssSrc = './src/scss/*.scss',
        cssDst = './dist/css';

    gulp.src(cssSrc)
        .pipe(sass({ style: 'expanded'}))
        .pipe(gulp.dest(cssDst))
        .pipe(rename({ suffix: '.min' }))
        .pipe(minifycss())
        .pipe(livereload(server))
        .pipe(gulp.dest(cssDst));
});

// 圖片處理
gulp.task('images', function(){
    var imgSrc = './src/images/**/*',
        imgDst = './dist/images';
    gulp.src(imgSrc)
        .pipe(imagemin())
        .pipe(livereload(server))
        .pipe(gulp.dest(imgDst));
})

// js處理
gulp.task('js', function () {
    var jsSrc = './src/js/*.js',
        jsDst ='./dist/js';

    gulp.src(jsSrc)
        .pipe(jshint('.jshintrc'))
        .pipe(jshint.reporter('default'))
        .pipe(concat('main.js'))
        .pipe(gulp.dest(jsDst))
        .pipe(rename({ suffix: '.min' }))
        .pipe(uglify())
        .pipe(livereload(server))
        .pipe(gulp.dest(jsDst));
});

// 清空圖片、樣式、js
gulp.task('clean', function() {
    gulp.src(['./dist/css', './dist/js', './dist/images'], {read: false})
        .pipe(clean());
});

// 默認任務 清空圖片、樣式、js並重建 運行語句 gulp
gulp.task('default', ['clean'], function(){
    gulp.start('html','css','images','js');
});

// 監放任務 運行語句 gulp watch
gulp.task('watch',function(){
    livereload.listen();
        // 監聽html
        gulp.watch('./src/*.html', function(event){
            gulp.run('html');
        })

        // 監聽css
        gulp.watch('./src/scss/*.scss', function(){
            gulp.run('css');
        });

        // 監聽images
        gulp.watch('./src/images/**/*', function(){
            gulp.run('images');
        });

        // 監聽js
        gulp.watch('./src/js/*.js', function(){
            gulp.run('js');
        });
});

7.安裝npm的http-server模塊，快速創建http服務：npm install -g http-server

8.安裝瀏覽器LiveReload插件，目前我知道的關於Safari、Firefox、Chrome都有此插件，網上搜下吧，我就不提供了

9.運行http-server，在從新打開一個命令行窗口啓動gulp:

　　第一個cmd窗口：

http-server

　　第二個cmd窗口：

gulp watch

這時，打開安裝過livereload插件的瀏覽器輸入localhost:8080就能夠了，並點擊livereload插件圖標激活連接便可（http-server默認爲8080端口），這時更改src文件夾下的文件（能夠拿html文件更改試下【最好結構完整，不要連html，head，body都不寫】）時，保存後，就會看到瀏覽器自動刷新了。

關於這個插件網上大部分人介紹的都是chrome的，但我更建議用Firefox的，由於Firefox的體驗更好些，由於在chrome中時保存後又是頁面沒變化，須要多按幾下ctrl+s纔會刷新頁面，但在firefox下我就沒有發現這個問題。

10.到此，初步的嘗試gulp前端自動化開發就完事了，但繼續探索gulp的步伐纔剛剛開始，若是有更好的gulp教程，但願能介紹給我和你們知道，先在這裏謝過了，好了，我也要休息下，看看影視了,就到這裏吧。