Gulp-前端進階A

畢業到轉行以來有一年時間了，成為一名程式猿也有大半年了，之前在新浪上隨便寫寫簡單的學習過程，感覺不夠像那麼回事，現在接觸前端也有一段時間了，也做過幾個項目，認識到可以拓展的實在太多了，希望從這裡起步，踏踏實實，記錄好點點滴滴。------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/，這個效果超好，可以圖片選擇這個壓縮