寫這篇文章的目的是為了以後的專案中懶得再去配gulp，直接可以拿這篇部落格中的來用，因為有時候配置還是挺煩人的。
1、del 刪除檔案，用於清空檔案
2、browser-sync 用於自動重新整理瀏覽器，從此再也不用f5手動重新整理了
3、gulp-htmlmin 用於壓縮html
4、gulp-clean-css 壓縮css
5、gulp-uglify 壓縮js
6、gulp-replace 替換路徑
7、gulp-base64 將小圖背景圖轉為base64的形式，可以自己設定最大多少尺寸轉為base64
8、gulp-imagemin 壓縮大小，不過效果不明顯，還需要自己再處理一下
其他想用的外掛程式可以自己去找，基本可以專案的需要，不夠就去加就行
1、由於專案中靜態資源需要替換成公司的cdn,而且公司中的專案已經公升級為https，所以這裡弄了乙個配置檔案
config.js:
var projeact = 'awardsong'; //專案名var terminal ='mobile'; //
具體哪個端（pc、mobile..）
var commit = 'e:/work'; //
測試環境
module.exports =
2、平時我是用sass來進行編碼的，所以弄了乙個sass目錄，css裡面的檔案不用寫。執行編譯的時候會自動將sass編譯到css檔案中。
3、開發環境，執行gulp default即可，然後在瀏覽器中選擇你在編譯的html，每次執行編譯的時候，只要編輯器儲存了**，瀏覽器會做相應的改變。無需重新整理。
4、如果要打包到生產環境，也就是發布到線上，可以執行gulp release,這樣的話所有的靜態檔案就會打包到dist的目錄下，而且所以的檔案都是經過壓縮的。當然，輸出路徑也是可以自己替換的
目錄結構：
projecdname
+src
-css
-html
-images
-js-sass
-config.js
-gulpfile.js
-package.json
package.json檔案內容如下：
,"author": "",
"license": "isc",
"devdependencies":
}
gulpfile.js內容如下
/** @gulp：自動化任務
*/var gulp = require('gulp');
var rm = require('del'); //
刪除檔案
var browsersync = require('browser-sync');
var reload = browsersync.reload; //
自動重新整理,從此不用f5
var htmlmin = require('gulp-htmlmin'); //
壓縮html
var minicss = require('gulp-clean-css'); //
壓縮css
var minijs = require('gulp-uglify'); //
壓縮js
var sass = require('gulp-sass'); //
編譯sass
var run_os_cmd = require('child_process').exec;
var replace = require('gulp-replace');
var cssbase64 = require('gulp-base64'); //
將小圖背景圖轉為base64的形式
var imagemin = require('gulp-imagemin');
/*清除產出目錄
*/gulp.task('clear-dir', function
() )
//引入配置檔案
var config = require('./config.js');
var cdn=config.cdn[0];
/** html壓縮
* 乾掉http:和https:協議名
* 替換掉路徑
*/gulp.task('mini-html', function
() ))
.pipe(replace(/\.\.\/(css\/\s+\.(css|less|scss))/g,function
(all,str)))
.pipe(replace(/\.\.\/(js\/\s+\.(js))/g,function
(all,str)))
.pipe(htmlmin())
.pipe(gulp.dest('dist/html/'))
})/*
產出*/
gulp.task('images', function
() ))
.pipe(gulp.dest('dist/images/'))
})/*
sass開發
*/gulp.task('sass_dev', function
() ))
})/*
css壓縮
* js壓縮
* 乾掉http:和https:協議名
*/gulp.task('mini-js', function
() )
/*自動重新整理
*/gulp.task('server', function
() ,
notify:
false
, ghostmode:
false
, port: 8080,
open: "external"},
function
(err, arg) )
})/*
開發環境
*/gulp.task('default', [
'sass_dev',
'server'],
function
() )
/*生產環境
*/gulp.task('release', [
'clear-dir',
'mini-html',
'mini-css',
'mini-js',
'images'],
function
() )
專案的實際操作我發布到github了，有興趣的可以搞一搞：
備註：**比較簡單，有一定gulp基礎的都可以看的懂。主要是為了以後方便，直接拿來用即可，無需再去配置啊什麼鬼。
要在適合的時機切入到實戰工作中
老男孩語錄 要在適合思維時機切入到實戰工作中 等跟老師都學會了在找去工作，這樣的思想是不對的！第一，知識是無限的，永遠學不完，光老男孩培訓的linux運維課程就5個級別，你們現在才是1級啊。第二，沒有去實踐工作，永遠都感覺沒完全學會。第三，實戰中的進步才是最快的，也是最有價值的。你看微軟的系統，如果...
要在適合的時機切入到實戰工作中
老男孩語錄 要在適合思維時機切入到實戰工作中 等跟老師都學會了在找去工作，這樣的思想是不對的！第一，知識是無限的，永遠學不完，光老男孩培訓的linux運維課程就5個級別，你們現在才是1級啊。第二，沒有去實踐工作，永遠都感覺沒完全學會。第三，實戰中的進步才是最快的，也是最有價值的。你看微軟的系統，如果...
要在適合的時機切入到實戰工作中
老男孩語錄 要在適合思維時機切入到實戰工作中 等跟老師都學會了在找去工作，這樣的思想是不對的！第一，知識是無限的，永遠學不完，光老男孩培訓的linux運維課程就5個級別，你們現在才是1級啊。第二，沒有去實踐工作，永遠都感覺沒完全學會。第三，實戰中的進步才是最快的，也是最有價值的。你看微軟的系統，如果...