Gulp

date: 2016-05-16 16:08:19

特色：

• 易於使用：經過代碼優於配置的策略，Gulp 讓簡單的任務簡單，複雜的任務可管理。

• 構建快速：利用 Node.js 流的威力

• 插件高質：Gulp 嚴格的插件指南確保插件如你指望的那樣簡潔高質得工做。

• 易於學習：經過最少的 API，掌握 Gulp 絕不費力，構建工做盡在掌握：如同一系列流管道。

使用指南：

1.建立項目文件夾（如gulp）:

mkdir gulp

2.全局安裝gulp:

$ npm install -g gulp

3.項目的開發依賴（devDependencies）安裝:

$ npm install  gulp --save-dev

4.在gulp文件夾下建立一個名 gulpfile.js(打包工具) 的文件

var gulp = require('gulp');

 gulp.task('default', function() {
 // 將你的默認的任務代碼放在這
 });

5. 運行 gulp：

$ gulp/gulp default

默認的名爲 default 的任務（task）將會被運行，在這裏，這個任務並未作任何事情。想要單獨執行特定的任務（task），請輸入 gulp <task> <othertask>。

能夠作些什麼？可看下文練習展現

var concat = require('gulp-concat');    合併文件 
var jsmin  = require('gulp-jsmin');     js文件壓縮   
var htmlmin  = require('gulp-htmlmin'); html文件壓縮
var cssmin  = require('gulp-cssmin');   css文件壓縮,庫裏也許查不到，但能夠使用
var less  = require('gulp-less');       
var jade  = require('gulp-jade');

---

一個項目如何構建清晰易讀的文件夾?

1.文件夾建立與初始化：

簡單說明:

• desk: 放置壓縮的文件夾，裏面的html/css/js是經過終端的處理，傳遞過來的壓縮文件
• node_modules: 項目的開發依賴（devDependencies)安裝 $ npm install gulp --save-dev
• public: 第三方的內容，多爲壓縮版的插件
• src:原生的js/css放在此處，便於維護。
• view:原生html放置的地方（能夠使用.jade）
• gulpfile.js:手動建立，名稱必須，不可更改
• package.json:初始化project文件夾 $ npm init

2.以上作完就能夠按項目需求引入gulp插件

終端project裏執行黃線2條命令後生成左邊圈出的內容，其餘同理！！！

3.練習展現：

a. concat和jsmin結合運用：

此處concat和jsmin引入與上文less、jade同理

圖1

圖2

b. less和jade綜合運用：

圖

簡要說明：

• src 裏index.less運用less語法輸入
• src 裏index.js,因爲本人後期引入了jquery.js，故能夠用$形式輸入
• view 裏index.jade運用jade語法輸入

參考內容：Gulp官網