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基礎

1、本地安裝gulp
進入專案根目錄執行npm install gulp --save-dev（添加--save-dev會在package.json記錄依賴關系），
2、任務清單
在專案根目錄中創建gulpfile.js（這是一個組態檔）

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

3、定義任務
在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'));
});

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

gulp less

這樣我們的LESS檔案便會編譯成CSS了，

Gulp作業原理

通過不同的插件實作構建任務，Gulp只是按著組態檔呼叫執行了這些插件，

Gulp API

Gulp是基于NodeJS的，通過require可以引入一個NodeJS的包（模塊），其作用類似于瀏覽器中的script標簽引入資源，被引入的包存放在node_modules目錄下，
引入gulp包（模塊）后回傳一個物件，習慣賦值給變數gulp，通過該物件提供的方法（API）完成任務的配置，
1、gulp.task() 定義各種不同的任務，如下圖有兩個引數

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

不同任務間存在依賴關系時，可以指定依賴，如下

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

2、gulp.src() 需要構建資源的路徑，字串或陣列（可以正則方式書寫）

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

2、gulp.pipe() 管道，將需要構建的資源“輸送”給插件，

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

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

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

4、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);
// });

標籤：JavaScript

上一篇：ElementUI的el-table的多選的取消選擇和篩選的取消所有過濾器之ref沖突問題

下一篇：vue(二)--條件陳述句