使用gulp

gulp項目構建

多個開發者共同開發一個項目，每位開發者負責不一樣的模塊，這就會形成一個完整的項目其實是由許多的「代碼版段」組成的；
使用less、sass等一些預處理程序，下降CSS的維護成本，最終須要將這些預處理程序進行解析；
合併css、javascript，壓縮html、css、javascript、images能夠加速網頁打開速度，提高性能；
這一系列的任務徹底靠手動完成幾乎是不可能的，藉助構建工具能夠輕鬆實現。
所謂構建工具是指經過簡單配置就能夠幫咱們實現合併、壓縮、校驗、預處理等一系列任務的軟件工具。
常見的構建工具包括：Grunt、Gulp、F.I.S（百度出品）、webpack

Gulp

Gulp是基於Nodejs開發的一個構建工具，藉助gulp插件能夠實現不一樣的構建任務，以其簡潔的配置和卓越的性能成爲目前主流的構建工具。
全局安裝 npm install -g gulp

Gulp基礎

一、本地安裝gulp
進入項目根目錄執行npm install gulp --save-dev（添加--save-dev會在package.json記錄依賴關係）。
二、任務清單
在項目根目錄中建立gulpfile.js（這是一個配置文件）

var gulp = require('gulp');
gulp.task('default',function(){
    //定義任務
})

三、定義任務
在gulpfile.js定義構建任務，如壓縮、合併，Gulp自身並不執行任何任務，是經過調用具體插件來完成的。
以編譯LESS爲例，安裝npm install gulp-less，以下圖定義任務

var gulp = require('gulp'),
    less = require('gulp-less');
gulp.task('less',function(){
    return gulp,src('./public.less/*.less')
        .pipe(less())
        .pipe(gulp.desk('./public/css'));
});

四、執行任務
輸入命令 gulp less

gulp less

這樣咱們的LESS文件便會編譯成CSS了。

Gulp工做原理

經過不一樣的插件實現構建任務，Gulp只是按着配置文件調用執行了這些插件。

Gulp API

Gulp是基於NodeJS的，經過require能夠引入一個NodeJS的包（模塊），其做用相似於瀏覽器中的script標籤引入資源，被引入的包存放在node_modules目錄下。
引入gulp包（模塊）後返回一個對象，習慣賦值給變量gulp，經過該對象提供的方法（API）完成任務的配置。
一、gulp.task() 定義各類不一樣的任務，以下圖有兩個參數

gulp.task('less',function(){
    //定義人物
})

不一樣任務間存在依賴關係時，能夠指定依賴，以下

gulp.task('less',['依賴一'],['依賴二'],['依賴三'],function(){
    
})

二、gulp.src() 須要構建資源的路徑，字符串或數組（能夠正則方式書寫）

gulp.task('less',function(){
    gulp.src('./public/less/**/*.js')
});

二、gulp.pipe() 管道，將須要構建的資源「輸送」給插件。

gulp.task('less',function(){
    gulp.src('./public/less/**/*.js')
        .pipe(less())
});

三、gulp.dest() 構建任務完成後資源存放的路徑（會自動建立）

gulp.task('less',function(){
    gulp.src('./public/less/**/*.js')
        .pipe(less())
        .pipe(gulp.desk('./public/css'));
});

四、gulp.watch()

經常使用Gulp插件(官網還有更多)

gulp-less 編譯LESS文件
gulp-autoprefixer 添加CSS私有前綴
gulp-cssmin 壓縮CSS
gulp-rname重命名
gulp-imagemin 圖片壓縮
gulp-uglify 壓縮Javascript
gulp-concat 合併
gulp-htmlmin 壓縮HTML
gulp-rev 添加版本號
gulp-rev-collector 內容替換
gulp-useref 文件合併，文件刪除
gulp-if 條件判斷

完整的一個項目構建

var gulp = require('gulp'),
    
    less = require('gulp-less'),

    cssmin = require('gulp-cssmin'),

    autoprefixer = require('gulp-autoprefixer'),

    rev = require('gulp-rev'),

    imagemin = require('gulp-imagemin'),

    useref = require('gulp-useref'),

    gulpif = require('gulp-if'),

    uglify = require('gulp-uglify'),

    rename = require('gulp-rename'),

    revCollector = require('gulp-rev-collector');

// gulp 對象，提供了若干方法

// 處理css
gulp.task('css', function () {

    return gulp.src('./public/less/main.less')
        .pipe(less())
        .pipe(cssmin())
        .pipe(autoprefixer())
        .pipe(rev())
        .pipe(gulp.dest('./release/public/css'))
        .pipe(rev.manifest())
        .pipe(rename('css-manifest.json'))
        .pipe(gulp.dest('./release/rev'));

});

// 處理圖片
gulp.task('image', function () {

    return gulp.src(['./public/images/**/*', './uploads/*'], {base: './'})
        .pipe(imagemin())
        .pipe(rev())
        .pipe(gulp.dest('./release'))
        .pipe(rev.manifest())
        .pipe(rename('image-manifest.json'))
        .pipe(gulp.dest('./release/rev'));

});

// 處理js
gulp.task('useref', function () {

    return gulp.src('./index.html')
        .pipe(useref())
        .pipe(gulpif('*.js', uglify()))
        .pipe(gulpif('*.js', rev()))
        .pipe(gulp.dest('./release'))
        .pipe(rev.manifest())
        .pipe(rename('js-manifest.json'))
        .pipe(gulp.dest('./release/rev'));

});

// 其它
gulp.task('other', function () {

    return gulp.src(['./api/*', './public/fonts/*', './public/libs/*', './views/*.html'], {base: './'})//base:肯定以哪一個爲基礎路徑
        .pipe(gulp.dest('./release'));

});

// 替換
gulp.task('rev', ['css', 'image', 'useref'], function () {

    gulp.src(['./release/rev/*.json', './release/index.html'])
        .pipe(revCollector())
        .pipe(gulp.dest('./release'));

});
//return用來解決依賴關係的執行時間問題
gulp.task('default', ['rev', 'other']);

// gulp.task('default', function () {
//  console.log('默認');
// })

// gulp.task('demo', ['css', 'image'], function () {
//  console.log(11);
// });