gulp詳細教程——前端自動化構建工具

項目構建

　　一個項目是由多個開發者共同開發一個項目，各負責不一樣的模塊，這就會形成一個完整的項目許多‘代碼片斷’組成，合併css、javascript，壓縮html、css、javascript、images能夠加速網頁打開速度，提高性能；可是一系列的任務徹底靠手動完成是很費時間成本的，使用gulp--自動構建就能將這些代碼片斷重組整合一下。

　　所謂的構建工具是指經過簡.單配置就能夠幫咱們實現合併、壓縮、校驗、預處理等一系列任務的軟件工具。常見的構建工具：Grunt、gulp、webpack、F.I.S（百度出品）；

gulp 工做原理

         自動化構建實際上是經過不一樣的插件實現構建任務，gulp只是按着配置文件的調用去執行這些插件。

gulp安裝

　　前提：gulp是依賴Node.js運行的，你必須先安裝Node.js；

　　進入項目根目錄執行npm install gulp --save-dev（添加--save-dev會在package.json記錄依賴關係）。(注意是本地安裝仍是全局安裝，npm install gulp –g 爲本地安裝)，npm uninstall XX     (此指令是卸載）

　　在項目根目錄初始化建立package.json文件(用來記錄配置項目常規設置)

　　   npm init

 

經常使用的gulp插件

gulp-less 編譯less文件

gulp-autoprefixer 增長CSS私有前綴 （-webkit-   -moz-   -o-） 

gulp-cssmin 壓縮CSS

gulp-rname重命名

gulp-imagemin 圖片壓縮

gulp-uglify 壓縮Javascript

gulp-concat 合併多文件爲一個

gulp-useref      在HTML作build標記合併

gulp-htmlmin 壓縮HTML

gulp-rev 添加版本號

gulp-rev-collector 內容替換

 

Demo實戰

在使用到那種方式構建都須要使用npm下載咱們項目所需的依賴插件。

eg：  npm install  gulp -g     本地安裝，gulp -v 檢測是否成功download

在項目根目錄下建立一個gulpfile.js文件做爲GULP的任務程序，定義任務清單。在定義構建任務實現壓縮合並，gulp自身並不執行任何步驟，是經過調用具體的插件來完成的。

   引入gulp插件----->定製任務清單----->執行命令

 

1.引入 

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');
// npm install完成download相應的插件時候，將其引入，我這裏是將全部都引入進來了

2  

處理cssgulp.task('css', function () {

gulp.task('css', function () {

return gulp.src('./less/main.less') .pipe(less()) //轉換成css .pipe(cssmin()) //壓縮 .pipe(autoprefixer()) //增長私有前綴 .pipe(rev())　　　　//增長隨機的版本號 .pipe(gulp.dest('./result/css')) //存儲 .pipe(rev.manifest()) .pipe(rename('css-manifest.json')) //建立css-manifest.json文件記錄隨機增長的版本號，以便後期在HTML文件更改樣式的路徑
　　　　　.pipe(gulp.dest('./result/rev')); }); //將css-manifest.json存儲
})

一些轉換後的效果

 

 壓縮image// 處理圖片

gulp.task('image', function () { return gulp.src(['./images/**/*', './uploads/*'], {base: './'}) //base是更改src裏面的路徑之中的./ 替換成下面存儲的路徑./result
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//緊跟其後的不變 .pipe(imagemin()) .pipe(rev()) .pipe(gulp.dest('./result')) // 存儲的路徑爲./result/images... ./result/uploads/
　　　　　.pipe(rev.manifest()) .pipe(rename('image-manifest.json')) .pipe(gulp.dest('./result/rev')); });

壓縮JS

 

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

    return gulp.src('./*.html')
        .pipe(useref())    //在HTML尋找build標記
        .pipe(gulpif('*.js', uglify()))  //判斷是否是JS，是則壓縮
        .pipe(gulpif('*.js', rev()))　　　//判斷是否是JS，是則增長版本號
        .pipe(gulp.dest('./result'));
        .pipe(rev.manifest())            //存儲增長的版本信息
        .pipe(rename('js-manifest.json'))
        .pipe(gulp.dest('./result/rev'));

});

 

替換(前面更換的版本號在HTML並無跟換樣式JS的路徑的，增長了版本號以後，須要將HTML中的路徑替換一下)

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

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

});

作到這一步，基本上gulp自動構建算完成的了，仍是要根據需求去選擇具體的步驟。

demo中遇到的error

在處理JS的過程當中。報了

Gulp throwing error: File not found with singular glob

 

出現這樣緣由主要是由於，在HTML中作標記build之間的 angular.js 文件不存在，以前是被增長了版本號，文件名更改過。注意一下就行了。

After renaming my file I am getting the following error when running the gulp build task，angular.js file no longer exists as i changed it to angular.min.js but for some reason it is cearching for the old file.

 

Tailing: If thers  is mistake in the article,please give us some advice.^_^