gulp API：http://www.gulpjs.com.cn/docs/api/
1、全局安裝gulp：
npm install gulp -g
gulp -v 測試安裝是否成功
2、配置項目：創一個gulp文件夾作爲項目根目錄，項目結構如下：
配置package.json文件，有三種方法：
可以用記事本之類的創建一個
用npm init建
也可以複製之前項目的創建好的package.json
用npm init 的方法來創建package.json 在終端將當前目錄切換至項目所在目錄（gulp），然後輸入npm init，一路回車，最終在項目根目錄下生成package.json:
{
"name": "gulp_test", /*項目名,切記這裏命名不要與模塊一樣，如命名爲gulp，要地安裝gulp時就會出錯*/
"version": "1.0.0", /*版本號*/
"description": "", /*描述*/
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "", /*作者*/
"license": "ISC" /*項目許可協議*/
}
3、本地安裝gulp：
npm install gulp --save-dev
--svae-dev 的作用就是將剛纔安裝的模塊寫入package.json中
全局安裝，爲的是能在端終運行gulp任務的，本地安裝是項目級別的安裝，將真正的gulp模塊安裝到項目的node_modules/下了，後面的插件都是依賴gulp模塊的
4、本地安裝gulp插件：
主要插件：編譯Sass (gulp-ruby-sass)；Autoprefixer
(gulp-autoprefixer)；縮小化(minify)CSS
(gulp-minify-css)；JSHint
(gulp-jshint)；拼接
(gulp-concat)；醜化(Uglify)
(gulp-uglify)；圖片壓縮
(gulp-imagemin)；即時重整(LiveReload)
(gulp-livereload)；清理檔案
(gulp-clean)；圖片快取，只有更改過得圖片會進行壓縮
(gulp-cache)；更動通知
(gulp-notify)
npm install --save-dev gulp-uglify gulp-concat gulp-minify-css
5、在項目根目錄下創建gulpfile.js文件
附錄：gulp插件：
無依賴的
- del: Delete files/folders using globs.
- opn: A better node-open. Opens stuff like websites, files, executables. Cross-platform.
- psi: PageSpeed Insights for Node.
- wiredep: Wire Bower dependencies to your source code.
- browser-sync: Live CSS Reload & Browser Syncing.
- require-dir: Helper to require() directories.
- run-sequence: Run a series of dependent gulp tasks in order.
gulp輔助
- gulp: The streaming build system.
- gulp-if: Conditionally run a task.
- gulp-cache: A cache proxy task for Gulp.
- gulp-changed: Only pass through changed files.
- gulp-filter: Filter files in a vinyl stream.
- gulp-replace: A string replace plugin for gulp.
- gulp-flatten: remove or replace relative path for files.
- gulp-useref: Parse build blocks in HTML files to replace references to non-optimized scripts or stylesheets.
- gulp-load-plugins: Automatically load any gulp plugins in your package.json.
gulp plugins for css
- gulp-autoprefixer: gulp-autoprefixer.
- gulp-uncss: Remove unused CSS selectors.
- gulp-csso: Minify CSS with CSSO.
- gulp-less: Less for Gulp.
gulp plugins for scripts
- gulp-jshint: JSHint plugin for gulp.
- jshint-stylish: Stylish reporter for JSHint.
gulp plugins for compress
- gulp-concat: Concatenates files.
- gulp-imagemin: Minify PNG, JPEG, GIF and SVG images.
- gulp-minify-html: Minify html with minimize.
- gulp-minify-css: Minify css with clean-css.
- gulp-uglify: Minify files with UglifyJS.
- gulp-size: Display the size of your project.
測試相關
- karma 自動測試插件
- karma-Chrome-launcher: 調用Chrome進行測試
待選
- gulp-livereload
- gulp-autowatch