gulp學習整理

使用gulp:

1.解決Javascript和CSS的版本問題.

2.解決Javascript和CSS的依賴，在加載順序上的問題，構建工具能夠大大的減小此類問題.
3.在性能優化上，當項目有大量的JS文件時，請求的文件越多耗時越大，這樣無疑拖慢了網頁的速度，而gulp可以經過：文件合併，文件壓縮進行解決。
4.在效率的提高上gulp可以作到：
　　vendor前綴：在CSS3使用愈來愈多的時候，咱們都知道一些CSS的特性，不一樣的瀏覽器CSS有不一樣的前綴，若是咱們手工添加將會很繁瑣，而若是使用構建工具，不少構建工具能夠自動給我添加CSS的Vendor前綴.
　　單元測試：JavaScript的單元測試在使用MVC或者MVVM的框架後，變得愈來愈容易，而單元測試是質量保證的一個很重要的手段，因此在提交以前，使用構建工具自動跑一遍咱們的單元測試是很是重要的
　　代碼分析：咱們寫的JavaScript不少時候會有一些潛在的bug, 好比忘了添加分號，某個變量沒有等等，使用一些JavaScript的代碼分析工具，能夠很好的幫咱們檢查一些常見的問題。
　　HTML引用JavaScript或者CSS文件：好比咱們須要使用Bower之類來引用前端JavaScript和CSS的第三方庫，那麼若是版本升級，添加移除等都用手工來修改HTML的話，第一比較耗時，第二比較容易疏漏，尤爲是在咱們須要切換Debug和production版本時將會有不少額外的工做，那麼使用前端構建工具能夠很好的解決這些問題。

gulp和grunt的比較？

grunt：

配置過於複雜
插件職責不單一 （就是不SRP）
臨時文件目錄多
性能慢 （由於臨時文件多，天然讀IO多)

gulp:
代碼優先.而且相對grunt代碼更加的簡潔明瞭
基於流
1000+的插件

gulp的安裝和使用：

1.Gulp安裝：

首先咱們須要安裝nodejs,經過 -v 檢查是否安裝成功和版本 node -v ,npm -v

進行全局安裝:npm install gulp -g 

全局安裝後，還須要切換到項目的根目錄下，單獨爲單個項目進行安裝下；安裝以下：npm install gulp

若是想在安裝的時候把gulp寫進package.json文件的依賴中，則能夠加上 –save-dev  例：npm install gulp --save-dev

2.gulp的4個API：

1.gulp.task：
gulp.task(name [, deps, fn])
註冊一個task, name 是task的名字，deps是可選項，就是這個task依賴的tasks, fn是task要執行的函數

2.gulp.src：
gulp.src(globs[, options])
與globs 匹配的文件，能夠是string或者一個數組

3.gulp.dest

定義gulp.dest(path[, options]) 就是最終文件要輸出的路徑，options通常不用

4.gulp.watch

gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb]) 就是監視文件的變化，而後運行指定的Tasks或者函數，這個相比Grunt須要使用插件，gulp自己就支持的很好。

3.使用gulp：

1.經過npm init來建立而且配置package.config文件
2.手動建立gulpfile.js文件，gulp默認是調用該文件的
3.在DOS命令下下載須要的用插件如:

• sass的編譯（gulp-ruby-sass）
• 自動添加css前綴（gulp-autoprefixer）
• 壓縮css（gulp-minify-css）
• js代碼校驗（gulp-jshint）
• 合併js文件（gulp-concat）
• 壓縮js代碼（gulp-uglify）
• 壓縮圖片（gulp-imagemin）
• 重命名（gulp-rename）
• 自動刷新頁面（gulp-livereload）
• 圖片緩存，只有圖片替換了才壓縮（gulp-cache）
• 更改提醒（gulp-notify）
• 清除文件（del）

在gulpfile中首先須要聲明：var gulp = require('gulp');
　　　　　　　　　　　　 var jshint = require('gulp-jshint');
　　　　　　　　　　　　 gulp.task('jshint', function() {
　　　　　　　　　　　　 　　gulp.src('./src/scripts/*.js')
　　　　　　　　　　　　　　 .pipe(jshint())
　　　　　　　　　　　　　　 .pie(jshint.reporter('default'));
　　　　　　　　　　　　});
在DOS命令中執行：gulp jshint

例子：

var gulp = require('gulp'),
less = require('gulp-less'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
livereload = require('gulp-livereload'),
del = require('del');

//圖片壓縮
gulp.task('image', function() {
   gulp.src('img/*.+(jpg|png|gif|svg)')
   .pipe(imagemin()) //壓縮
   .pipe(gulp.dest('img/images')); //輸出
});

gulp.task('script', function() {
   gulp.src("./js/*.js")
   .pipe(jshint())
   .pipe(jshint.reporter('default'))
   .pipe(concat("main.js"))
   .pipe(gulp.dest('./main/'))
   .pipe(rename({
    suffix: ".min"
   }))
   .pipe(uglify())
   .pipe(gulp.dest("./main/"))
})

gulp.task('style', function() {
   gulp.src("./css/*.css")
   .pipe(less())
   .pipe(gulp.dest('./css/'))
   .pipe(livereload())
   .pipe(autoprefixer("last 2 version", 'safari5', 'ie8', 'ie9', 'opera12.1'))
   .pipe(gulp.dest("./maincss/"))
   .pipe(rename({
   suffix: ".min"
   }))
   .pipe(minifycss())
   .pipe(gulp.dest("./maincss/"))

})

gulp.task('default', function() {
　　gulp.run("style","script");
　　gulp.watch('./css/*.css', ['style'],'./js/*.js', ['script'], function() {
　　gulp.run("style","script");
});

})

})