gulp前端自動化構建工具使用

（1）新建項目目錄gulp_web

（2）項目目錄下建目錄src裏面存放須要進行gulp處理的文件目錄及文件

（3）gulpfile.js文件內容爲聲明須要打包應用的gulp組件及打包文件路徑和打包任務，好比：

// 引入 gulp
var gulp = require('gulp'); // 引入組件
var jshint = require('gulp-jshint'); var less = require('gulp-less'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename'); // 檢查腳本
gulp.task('lint', function() { gulp.src('src/js/*.js') //該任務針對的文件
        .pipe(jshint())  //該任務調用的模塊
        .pipe(jshint.reporter('default')); }); // 編譯Sass
gulp.task('less', function() { gulp.src('src/less/*.less') .pipe(less()) .pipe(gulp.dest('./dist/css')); }); // 合併，壓縮文件
gulp.task('scripts', function() { gulp.src('src/js/*.js') .pipe(concat('all.js')) .pipe(gulp.dest('./dist')) .pipe(rename('all.min.js')) .pipe(uglify()) .pipe(gulp.dest('./dist')); }); // 默認任務
gulp.task('fx_web', function(){ gulp.run('lint', 'less', 'scripts'); // 監聽js文件變化
    gulp.watch('src/js/*.js', function(){ gulp.run('lint', 'less', 'scripts'); }); // 監聽less文件變化
    gulp.watch('src/less/*.less', function(){ gulp.run('lint', 'less', 'scripts'); }); });

 

（4）在安裝部署nodejs環境前提下，進入cmd命令行執行到項目根目錄：f:\gulp_web>

（5）f:\gulp_web>npm init 一路enter鍵初始化打包信息，生成package.json文件，內容如：

　　

{ "name": "gulp_web", "version": "1.0.0", "description": "", "main": "gulpfile.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }

（6）f:\gulp_web>npm install --save-dev gulp 執行安裝gulp組件，結果會在項目根目錄生成node_modules目錄。

注意gulp的安裝包括全局安裝和項目目錄安裝：

在系統管理員cmd默認路徑下全局安裝請輸入
npm install -g gulp
在項目目錄安裝請輸入
npm install --save-dev gulp

 

（7）根據上面gulpfile.js文件中所應用的聲明組件：

// 引入組件
var jshint = require('gulp-jshint'); var less = require('gulp-less'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename');

按需安裝組件，以下：
npm install --save-dev jshint gulp-jshint

npm install --save-dev less gulp-less

npm install --save-dev concat gulp-concat

npm install --save-dev uglify gulp-uglify

npm install --save-dev rename gulp-rename

(8)以上組件所有安裝完成後，f:\gulp_web>gulp fx_web 執行打包任務，在gulpfile.jf文件中聲明：

// 默認任務
gulp.task('fx_web', function(){ gulp.run('lint', 'less', 'scripts'); // 監聽js文件變化
    gulp.watch('src/js/*.js', function(){ gulp.run('lint', 'less', 'scripts'); }); // 監聽less文件變化
    gulp.watch('src/less/*.less', function(){ gulp.run('lint', 'less', 'scripts'); }); });

（9）若是上面任務執行順利，會出現以下畫面，並在根目錄生成目錄dist存放gulp處理事後的文件及目錄。

 

 

最後gulp自動化構建成功。

下面摘錄其餘網友的gulp組件說明：

必備插件

gulp-htmlmin 看到名字就能知道，這個插件是用來壓縮 HTML。PS：註釋啥的均可以去掉哦，看文檔get更多技能哈
gulp-imagemin 除了能壓縮常見的圖片格式，還能壓縮 SVG，叼叼的~
gulp-clean-css 壓縮 CSS。我本來推薦的是 gulp-minify-css，結果其首頁中已建議改用gulp-clean-css...
gulp-uglify 專業壓縮 Javascript
gulp-concat 上面幾個都是壓縮，這插件是管合併的...恭喜，「減小網絡請求」的成就達成:)
gulp-autoprefixer 給 CSS 增長前綴。解決某些CSS屬性不是標準屬性，有各類瀏覽器前綴的狀況，灰常有用
gulp-rename 修改文件名稱。好比有時咱們須要把app.js改爲app.min.js，瞬間高級了
gulp-util 最基礎的工具，但俺只用來打日誌...

經常使用插件

run-sequence gulp 的 task 都是並行(異步)執行，若是碰見須要串行的場景，那麼這個插件就是必備了。偶的使用場景是：處理(壓縮、合併等等) CSS/JS、再gulp-rev、再上傳 CDN；而後使用 CDN的地址替換 HTML 中的 CSS/JS 地址，再壓縮 HTML。那麼替換 HTML 這步須在以前的工做處理完後再執行。 ** 最後要說，gulp4.0發佈後，不須要RS也能夠搞定串行任務了 **
del / gulp-clean 刪除。俺的使用場景是：JS/CSS 文件都會在壓縮後使用gulp-rev，即文件名被hash，而後再上傳到 CDN，最後俺再使用 刪除插件 把本地壓縮後的文件刪除掉，不用多餘保存。
gulp-rev 把靜態文件名改爲hash的形式。
gulp-rev-replace 配合 gulp-rev 使用，拿到生成的 manifest。json 後替換對應的文件名稱。
gulp-rev-collector 到線上環境前，我會用來配合gulp-rev使用，替換 HTML 中的路徑
gulp-rev-append 給頁面引用的靜態文件增長hash後綴，避免被瀏覽器緩存...固然，若是是使用 CDN，這個套路就不行了
gulp-connect / gulp-livereload LiveReload 的倆款插件都值得擁有，不過都各稍有學習成本，看看文檔就明白鳥
gulp-sourcemaps 處理 JavaScript 時生成 SourceMap；若是你不瞭解 SourceMap，能夠看看這篇阮一峯大神的《Source Map 詳解》
gulp-load-plugins 幫忙偷懶用的，能夠幫咱們加載插件，不用require或者import...固然，俺我的感受用了這個插件後，閱讀gulpfile.js的可讀性差了，魚和熊掌不可兼得:(
gulp-jshint JavaScript 代碼校驗
gulp-sass / gulp-less 寫 CSS 的同窗都懂哈

進階插件

babel JS 語法新特性用起來。這個插件可讓咱們用新的 標準/特性/提案 寫 JavaScript 代碼，而後再向下 轉換編譯，最終生成隨處可用的 JavaScript 代碼。更通俗的說話就是：能夠用新的規範寫代碼，通過 babel 編譯後生成沒有兼容問題的代碼。gulp-flatten 移動指定文件，不想壓縮或者合併的時候，直接用這個插件把對應文件移動到指定文件夾。俺偶爾在內部項目會偷懶用上，圖方便:)gulp-coffee CoffeeScript 值得去了解gulp-markdown-pdf 把 Markdown 編譯爲 PDFgulp-markdown 寫手的福音，能夠把 Markdown 轉成 HTMLgulp-html2md 把 HTML 編譯爲 Markdowngulp-tinypng 超屌的圖片壓縮工具，使用 Tinypng 引擎。PS：由於 Tinypng 免費賬號有月限制，因此使用使需注意。sprity 生成雪碧圖。稍有點學習成本，仔細閱讀文檔便可。gulp-if 能夠在 pipe 裏面寫點邏輯了，屌不屌。舉例：好比處理 ./pub/*.js，若是文件名稱是 xxx.js，那麼不處理；更能夠用來區分當前是開發環境仍是生產環境。gulp-file-include 俺搞內部項目的時候會用到，讓 HTML 組件化的第一小步gulp-git 直接在 Build 時把代碼都提交到 git上了...特麼勞資懶起來連我本身都懼怕gulp-qiniu 用於把指定文件上傳至七牛的指定路徑下(PS:首先，你得有本身的七牛帳號和空間)gulp-notify 在控制檯中加入文字描述，build 的時候更高級有木有。固然，當須要的時候把錯誤信息也展現出來會頗有幫助。更高級的功能就須要你查看其文檔了~gulp-plumber gulp 的錯誤處理有點坑，假如發生錯誤進程就掛了。相對的解決辦法很多，可是這個是我我的比較推薦的，比特麼在容易出錯的地方寫錯誤監聽靠譜。因此這個插件能夠阻止 gulp 插件發生錯誤致使進程退出並輸出錯誤日誌。