使用gulp自動構建項目

簡介

gulp是基於Nodejs的自動任務運行器， 她能自動化的完成javascript、coffee、sass、less、html、image、css 等文件的的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的步驟。在實現上，她借鑑了Unix操做系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，使得在操做上很是簡單。經過本文，咱們將學習如何使用Gulp來改變開發流程，從而使開發更加快速高效。

browserSync能讓瀏覽器實時快速的響應文件的更改（htm、js、css），並自動刷新頁面，更重要的是browserSync能夠同時在pc、平板、手機等設備下進行調試。任何一次代碼保存，瀏覽器設備都會同時顯示您的改動。

gulp

gulp是基於nodejs的，因此咱們能夠用npm安裝，首先須要項目中有npm的package.json文件，若是沒有，就先初始化：

npm install

在項目中安裝gulp：

npm install gulp-less --save-dev

若是安裝成功了，在package.json中會存在以下節點：

// 省去了多餘的
{
  "devDependencies": {
    "gulp": "^3.9.1"
  }
}

在根目錄下建立文件gulpfile.js：

var gulp = require('gulp');

gulp.task('default', function(){
    console.log('test');
});

咱們建立了一個默認的gulp任務，在項目的終端輸入命令：gulp，會運行這個gulp命令，並輸出對應的test。

解析less並壓縮合並

項目中使用less編寫樣式很是的流利，可是瀏覽器不懂less的語法，咱們須要把less解釋爲css才能夠在瀏覽器裏使用。

咱們這裏用gulp-less來把less解釋成css，用gulp-minify-css來壓縮css，用gulp-concat將多個css合併爲一個css文件，節省流量。

安裝依賴：

npm install gulp-less --save-dev
npm install gulp-minify-css --save-dev
npm install gulp-concat --save-dev

而後建立任務編譯Less：

var gulp = require('gulp');
var concat = require('gulp-concat');
var gulpless = require('gulp-less');
var minifycss = require('gulp-minify-css');
var path = {
    less: './less/*.less'
};
gulp.task('less', function(){
    gulp.src(path.less)
        .pipe(gulpless())
        .pipe(minifycss())
        .pipe(concat('build.min.css'))
        .pipe(gulp.dest('./css'));
});

而後在終端運行命令：gulp less，稍等幾秒就能夠看到將less文件夾下面的less打包併合併到css文件夾下，名字爲：build.min.css。

上面的命令能夠解釋爲：建立任務less，將文件path.less表明的文件先運行任務gulpless()解析爲css，而後繼續將結果運行minifycss()任務進行壓縮，而後將壓縮後的css文件合併到build.min.css中，最後將這個文件輸出到css文件夾下。

壓縮合並js

項目中的js會愈來愈多，可是代碼量不是不少，依次下載也會耗費多餘的流量，因此把js進行壓縮打包也是不錯的選擇。

打包須要用到的插件：

• gulp-ng-annotate：可是當打包angular項目的時候，壓縮的js會破壞angular的依賴注入，而gulp-ng-annotate解決的就是angular中依賴注入的問題。
• gulp-uglify：壓縮js
• gulp-sourcemaps：生成source map。簡單說，source map就是一個信息文件，裏面儲存着位置信息。也就是說，轉換後的代碼的每個位置，所對應的轉換前的位置。

依次安裝：

npm install gulp-uglify --save-dev
npm install gulp-ng-annotate --save-dev
npm install gulp-sourcemaps --save-dev

建立gulp的打包js的任務：

// 壓縮js
var annotate = require('gulp-ng-annotate');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');

var path = {
    less: './less/*.less',
    js: './js/*.js',
};
gulp.task('js', function () {
    return gulp.src(path.js)
        .pipe(annotate({single_quotes: true}))
        .pipe(uglify())
        .pipe(concat('build.min.js'))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./src/js'));
});

建立個啓動任務：

gulp.task('serve',['less', 'js'], function(){
});

當在終端執行命令gulp serve以後，會運行less和js任務。

browserSync

每次修改後都須要去手動到瀏覽器裏刷新纔看到顯示結果，對於調試來說是很痛苦的。幸運的是，有browserSync這個插件可讓代碼保存後自動刷新。

依賴

• browser-sync：讓瀏覽器自動刷新
• opn：跨平臺 ） 打開文件，網站，可執行文件等。

安裝

npm install browser-sync --save-dev
npm install opn --save-dev

建立一個靜態服務器：

browserSync.init({
   server:{
        baseDir: path.src
    },
    port:3000,
    open:false
}, function(){
    var homepage = 'http://localhost:3000/';
    opn(homepage);
});

這樣就建立了一個靜態資源服務器，端口爲3000，並默認打開首頁。

browserSync.stream() 方法返回一個變換流，將輸出的文件注入到瀏覽器，好比前面的less任務，添加語句讓任務成功以後，將打包好的文件注入到瀏覽器。

gulp.task('less', function(){
    gulp.src(path.less)
        .pipe(less())
        .pipe(gulp.dest('./src/css'))
        .pipe(browserSync.stream());
});

能夠和gulp任務結合，當任務結束後靜態注入或者刷新瀏覽器。

// 編譯完less後，無刷新方式更新頁面
gulp.watch(path.less, ['less']);
gulp.watch(path.js, ['js']);
// 修改頁面和js後，頁面刷新，從新加載
gulp.watch([path.html, path.js]).on("change", function() {
    browserSync.reload();
});

彙總

所有的依賴package.js：

// 省略多餘的
"devDependencies": {
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-less": "^3.3.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-ng-annotate": "^2.0.0",
    "gulp-sourcemaps": "^2.6.1",
    "gulp-uglify": "^3.0.0",
},

gulp任務gulpfile.js：

// 引入定義工具
var gulp = require('gulp');
var concat = require('gulp-concat');
// less 編譯用到
var less = require('gulp-less');
// 壓縮css
var minifyCss = require('gulp-minify-css');
// 壓縮js
var annotate = require('gulp-ng-annotate');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
// 動態刷新
var browserSync = require('browser-sync');
var opn = require('opn');
// 定義路徑
var path = {
    less: './src/app/components/**/*.less',
    css: './src/css/**/*.css',
    js: './src/app/**/*.js',
    html: './src/app/components/**/*.html',
    src: './'
};
//合併html模板命令--gulp template
var templateCache = require('gulp-angular-templatecache');
gulp.task('template', function () {
     gulp.src(path.html)
        .pipe(templateCache({module: 'templates'}))
        .pipe(gulp.dest('./src/js'));
});
gulp.task('less', function(){
    gulp.src(path.less)
        .pipe(less())
        .pipe(minifyCss())
        .pipe(concat('build.min.css'))
        .pipe(gulp.dest('./src/css'))
        .pipe(browserSync.stream());
});
gulp.task('js', function () {
    return gulp.src(path.js)
        .pipe(annotate({single_quotes: true}))
        .pipe(uglify())
        .pipe(concat('build.min.js'))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./src/js'));
});
gulp.task('serve',['less', 'js'], function(){
    browserSync.init({
        server:{
            baseDir: path.src
        },
        port:3000,
        open:false
    }, function(){
        var homepage = 'http://localhost:3000/';
        opn(homepage);
    });

    // 編譯完less後，無刷新方式更新頁面
    gulp.watch(path.less, ['less']);

    gulp.watch(path.js, ['js']);
    // 修改頁面和js後，頁面刷新，從新加載
    gulp.watch([path.html, path.js]).on("change", function() {
        browserSync.reload();
    });
});

ok，如今就能夠實時的保存，瀏覽器會實時的刷新，很是爽~