使用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");
});

})

})

?

轉載于:https://www.cnblogs.com/xialinzhi/p/5744243.html

總結

以上是生活随笔為你收集整理的gulp学习整理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。