gulp前端工程化教程

gulp

npm install -g gulp-concat 文件打包
npm install -g gulp-rename 文件重命名
npm install -g gulp-imagemin 圖片壓縮
npm install -g gulp-jslint js代碼校驗 慎用
npm install -g gulp-minify-css css壓縮
npm install -g gulp-minify-html html壓縮
npm install -g gulp-uglify js壓縮

它是一個前端工程化工具，用來實現代碼部署，css,javascript,html等代碼的壓縮，es6，less,styls等代碼的編譯，圖片優化等；
它的實現：是基於UXIx中管道概念，nodejs中有個叫stream流，前一個操做的輸出做爲後一個操做的輸入；
壓縮CSS文件，第一個過程是獲取文件，將這個文件轉化成一個stream流，第二個過程將文件內容進行壓縮，這個文件內容就是經過一個操做流入過來；第三個過程就是將文件寫入一個文件中，能夠是一個新的文件，也能夠是當前文件；
Stream流：nodejs中讀取文件，獲得結果是一個流，這種流中包含文件的信息，包括文件名稱、內容、編碼、路徑等等都在流中；
是爲了寫入或者更改來實現，使咱們操做文件實現階段化，

gulp的優點：
1. api簡單：src,dest,task,pipe；
2. 插件資源豐富，社區龐大,開發插件也很簡單；

全局安裝：

npm install gulp -g
查看是否安裝成功：
gulp -v

項目根目錄下安裝：

配置package.json:
npm init

安裝gulp:
npm install gulp --save-dev

安裝gulp插件:
npm install gulp-less --save-dev

新建入口文件：
gulpfile.js， 這個文件很重要，每一個項目都要有這個文件，這個是當執行gulp會自動執行該文件，該文件中咱們能夠書寫gulp語句，基於js實現，與js語法同樣的；
運行gulp:
gulp 任務名稱

Task方法

用來定義一個任務，
語法gulp.task(name[,deps],fn) name:表示任務的名稱 deps:表示任務的依賴任務，可選參數； fn:任務的回調函數 

運行gulp中task用run方法 ：
語法： gulp.run(taskname);
taskname:表示任務的名稱；

在最新的gulp版本中，run方法不建議使用，咱們能夠經過默認任務來實現
語法：gulp.task('default',deps,fn)
注意默認任務的名稱就是default，不能寫其餘的名字，若是寫其餘的名字就會被當作普通任務來執行；
deps:依賴的任務集合；
fn:執行回調函數；

// gulpfile var gulp = require('gulp'); gulp.task('demo',function(){ console.log('demo task') }) gulp.task('default',['demo'],function(){ console.log('default task') }) 

cmd輸出

D:\MyPro\GULP\03default>gulp [00:15:05] Using gulpfile D:\MyPro\GULP\03default\gulpfile.js [00:15:05] Starting 'demo'... demo task [00:15:05] Finished 'demo' after 267 μs [00:15:05] Starting 'default'... default task [00:15:05] Finished 'default' after 101 μs 

依賴的任務要先於當前任務執行；
μs：微秒；
在一個項目中，咱們要批量的處理文件，

gulp.src爲咱們提供這樣的方法：將文件轉換成stream流；

語法，gulp.src(filePath,option)
filePath:文件的路徑,若是多個不一樣的文件，咱們有兩種方法顯示
    一種是數組形式['a.js','b.css'] 一種是glops表達式,['*.js'] 表示a.js , b.js , c.js可是必定不能有目錄符號‘/’; option:通常默認 

.pipe，咱們能夠經過管道方法來處理每一個階段的流，這些管道依次排開，前一個管道的輸出做爲後一個管道的輸入,對流執行，鏈式調用；

語法 .pipe(fn) fn:一般表示處理方法； 好比咱們將一個文件放到另一個目錄下： gulp.pipe(gulp.dest(path)); gulp.dest方法表示將文件寫入某個目錄： 語法，gulp.dest(path) path:路徑，目錄路徑 

//讀取js中的index.js文件 //將index.js文件放到dest目錄下 //引入gulp模塊 var gulp = require('gulp'); //定義一個讀寫index.js的任務 gulp.task('dealIndex',function(){ //讀取Index文件 gulp.src('js/index.js') //經過管道操做這個流 //將文件內容放到dest文件夾內 .pipe(gulp.dest('dest')) }) //啓動默認任務來執行dealIndex任務 gulp.task('default',['dealIndex']) 

cmd:

D:\MyPro\GULP\04讀寫>gulp
[00:57:47] Using gulpfile D:\MyPro\GULP\04讀寫\gulpfile.js
[00:57:47] Starting 'dealIndex'... [00:57:47] Finished 'dealIndex' after 15 ms [00:57:47] Starting 'default'... [00:57:47] Finished 'default' after 30 μs 

文件監聽

咱們在開發中想邊開發邊發佈，gulp提供了一個方法叫watch來監視文件變化，來實現實時發佈；
文件在寫入、修改、刪除時發生一個操做就是保存文件；

watch方法的語法
第一種： gulp.watch(globs,fn);
globs: 表示文件的路徑
* 表明任意字符，除了目錄符號/和拓展名.js .css .html等,能夠： .js a.js abc.js
** 表明任意字符，能夠包括目錄符號哦，可是不能包括拓展名.js .css等,能夠：/a.js
混合使用：/.js 包含全部的js文件
lib/*/.js lib文件夾下面的全部js文件
fn:有個參數表示文件對象，有兩個屬性：
type:操做的類型，changed,deleted,added
path:操做的文件，D:\MyPro\GULP\05文件監聽\js\index.js

第二種：gulp.watch(globs,deps); golbs:表示文件的路徑 deps:表示任務task集合 

案例一：
咱們監聽js文件下文件到demo的輸出

// 監聽Index.js的變化，發佈到demo文件夾下 var gulp = require('gulp'); gulp.task('default') gulp.watch('js/*.js',function(e){ console.log(e) //將js下面的js文件放入demo文件夾下 gulp.src('js/*.js') .pipe(gulp.dest('demo')) }) 

cmd輸出，下面的對象是console.log(e)

D:\MyPro\GULP\05文件監聽>gulp
[01:32:54] Using gulpfile D:\MyPro\GULP\05文件監聽\gulpfile.js
[01:32:54] Starting 'default'... [01:32:54] Finished 'default' after 158 μs { type: 'changed', path: 'D:\\MyPro\\GULP\\05文件監聽\\js\\index.js' } { type: 'deleted', path: 'D:\\MyPro\\GULP\\05文件監聽\\js\\demo.js' } { type: 'changed', path: 'D:\\MyPro\\GULP\\05文件監聽\\js\\index.js' } { type: 'added', path: 'D:\\MyPro\\GULP\\05文件監聽\\js\\demo.js' } { type: 'changed', path: 'D:\\MyPro\\GULP\\05文件監聽\\js\\demo.js' } 

案例二

var gulp = require('gulp'); gulp.task('demo',function(){ console.log('demo task') }) gulp.task('dealJs',function(){ gulp.src('js/*.js') .pipe(gulp.dest('demo')) }) gulp.task('default'); gulp.watch('js/*.js',['dealJs','demo']) 

gulp

只是一個工具的抽象，它把基本的功能抽取出來，例如，讀取文件，寫入文件，建立管道，監聽文件，建立任務；
可是如何在管道中處理這些stream流，沒有實現，由於操做stream太複雜了，es6變成js,將less變成css，文件打包，文件壓縮等等，這些不是一兩個方法就能解決；所以把這些業務邏輯抽取出來做爲插件使用，任何人均可以開發插件，
好處：插件多樣性，每一個人均可以有本身的一個插件，這樣使得咱們gulp包很小，
問題：想使用一個功能，沒有一個很好的指引，

插件如何使用

1. 安裝插件包，npm install -g gulp-rename (修改文件名插件)，能夠複製到本身目錄下；
2. 在gulpfile.js中將該模塊引入進來，經過require；
3. 而後經過管道方法pipe使用

例子：重命名

//將js中的index.js文件放到demo文件夾中，而且命名爲app.js var gulp = require('gulp'); var rename = require('gulp-rename'); gulp.task('renameJs',function(){ gulp.src('js/index.js') .pipe(rename('app.js')) .pipe(gulp.dest('demo')) }) gulp.task('default',['renameJs']) 

js文件的壓縮

gulp-uglify

1. 安裝插件
2. 在gulpfile.js引入該模塊
3. 在pipe方法中執行該方法

var gulp = require('gulp'); var uglify = require('gulp-uglify'); gulp.task('uglifyJs',function(){ gulp.src('js/*.js') .pipe(uglify()) .pipe(gulp.dest('demo')) }) gulp.task('default',['uglifyJs']) 

css壓縮

gulp-minify-css

var gulp = require('gulp'); var minifyCss = require('gulp-minify-css'); gulp.task('minifyCssNow',function(){ gulp.src('css/*.css') .pipe(minifyCss()) .pipe(gulp.dest('demo')) }) gulp.task('default',['minifyCssNow']) 

html文件壓縮

gulp-minify-html

var gulp = require('gulp'); var minifyHtml = require('gulp-minify-html'); gulp.task('miniFy',function(){ gulp.src('./*.html') .pipe(minifyHtml()) .pipe(gulp.dest('demo')) }) gulp.task('default',['miniFy']) 

Vue項目實戰

1. 將html壓縮
2. 將css壓縮
3. 將js壓縮

//咱們要壓縮css js html 依賴三個插件 var gulp = require('gulp'); var uglify = require('gulp-uglify'); var minifyCss = require('gulp-minify-css'); var minifyHtml = require('gulp-minify-html'); //對三類文件壓縮並放到壓縮文件夾下 gulp.task('jsUglify',function(){ gulp.src('10/js/*.js') .pipe(uglify()) .pipe(gulp.dest('demo/js')) }) gulp.task('cssMinify',function(){ gulp.src('10/css/*css') .pipe(minifyCss()) .pipe(gulp.dest('demo/css')) }) gulp.task('htmlMinify',function(){ gulp.src('10/*.html') .pipe(minifyHtml()) .pipe(gulp.dest('demo/')) }) gulp.task('dealImage',function(){ gulp.src('10/img/**/*.*') .pipe(gulp.dest('demo/img')) }) gulp.task('dealData',function(){ gulp.src('10/data/*.json') .pipe(gulp.dest('demo/data')) }) gulp.task('default',['jsUglify','cssMinify','htmlMinify','dealImage','dealData']) 

文件打包

開發時咱們可能會有幾十個文件，咱們上線時會打包成一個文件
gulp-concat實現文件打包，使用方式和uglify同樣，只不過concat方法須要傳遞一個參數，這個參數表示打包後的文件名稱；

//將js文件夾中的js文件打包 var gulp = require('gulp'); var concat = require('gulp-concat'); //獲取js中的Js文件而且打包在一塊兒 gulp.task('jsConcat',function(){ gulp.src('js/*.js') .pipe(concat('main.js')) .pipe(gulp.dest('demo')) }) gulp.task('default',['jsConcat']) 

js代碼校驗

gulp-jslint 實現對JS代碼校驗

圖片壓縮

gulp-imagemin

var gulp = require('gulp'); var imagemin = require('gulp-imagemin'); gulp.task('dealImage',function(){ gulp.src('img/*.*') .pipe(imagemin()) .pipe(gulp.dest('demo')) }) gulp.task('default',['dealImage'] 

可見對Png格式的圖片壓縮效果最好