畢業到轉行以來有一年時間了，成為一名程式猿也有大半年了，之前在新浪上隨便寫寫簡單的學習過程，感覺不夠像那麼回事，現在接觸前端也有一段時間了，也做過幾個項目，認識到可以拓展的實在太多了，希望從這裡起步，踏踏實實，記錄好點點滴滴。 HHL Gulp使用步驟： 1 安裝node（npm），全局安裝，我使用 ...
畢業到轉行以來有一年時間了，成為一名程式猿也有大半年了，之前在新浪上隨便寫寫簡單的學習過程，感覺不夠像那麼回事，現在接觸前端也有一段時間了，也做過幾個項目，認識到可以拓展的實在太多了，希望從這裡起步，踏踏實實，記錄好點點滴滴。------HHL
Gulp使用步驟：
1 安裝node（npm），全局安裝，我使用的是windows7
2 全局安裝gulp，npm install -g gulp
3 搭建項目框架結構，建package.json，寫上{}
build為轉化後存儲的文件，src為自己的項目，即來源文件，gulpfile.js為操作代碼，package.json為安裝gulp及插件的信息
4 在項目根目錄以--save -dev來安裝一堆你要用的，首先npm install --save-dev gulp必須的
5 然後各種插件 npm install --save-dev gulp-less，npm install --save-dev gulp-watch......基本看名稱就知道插件作用
gulp-rename：重命名
gulp-uglify：JS壓縮
gulp-minify-css/html
gulp-concat：JS合併
gulp-less/sass
gulp-imagemin
還有 browserify，livereload，browser-sync的使用
6 API
gulp.src(globs[,options])：路徑(類似正則)，參數：數據流(是吧？stream)
部分：
*：單字元串
**：字元串、分隔符
js/*/.js 匹配js目錄及其子目錄下所有尾碼為.js的文件
*.+(js|css) 匹配根目錄下所有尾碼為.js或者.css的文件
多種匹配模式下排除：gulp.src(['js/*.js','css/*.css','!reset.css'])，排除reset.css
gulp.dest(path[,options])：轉化存儲到
gulp.task(name[,deps],fun)：deps為先執行的任務，name為任務，在命令行輸入：gulp name，就運行了
gulp.watch(glob[,opts],tasks)：監聽文件變化
.pipe：類似柯理化一樣的那種函數連接
7 參考文獻
http://www.cnblogs.com/tugenhua0707/p/5562548.html#_labe3
http://www.w3ctech.com/topic/134
. plugins
替代繁瑣的(例子)：取代 var imagemin=require('gulp-imagemin');
用：同樣需要安裝gulp-imagemin
var gulp = require('gulp'),
這個---gulpLoadPlugins = require('gulp-load-plugins'),
這個---plugins = gulpLoadPlugins();
路徑....
gulp.task('images',function(){
return gulp.src(paths.img + "**/*")
.pipe(plugins.imagemin())
.pipe(gulp.dest(paths.build + "/images"));
});
圖片壓縮效果：壓縮效果太小，https://tinypng.com/，這個效果超好，可以圖片選擇這個壓縮
