gulp初學

原文地址：gulp初學

至於gulp與grunt的區別，用過的人都略知一二，總的來講就是2點：

一、gulp的gulpfile.js  配置簡單並且更容易閱讀和維護。之因此如此，是由於它們的工做方式不一樣，gulp的流式構建使得gulpfile.js文件寫起來並非像Gruntfile.js同樣完成一個個插件的配置那樣多。對於這點個人理解還不是很深入，只能暫時這樣作一個比較吧，之後的學習接觸多了應該就會深入的體會到。

二、彷佛gulp的上手比grunt更簡單一些，或者說一個是輕量級一個是重量級的吧，不能說誰好誰壞，在不一樣的領域都有各自發揮的特色。

接下來是安裝，很簡單的2步便可：

一、建立本身的文件夾；

二、若是以前有在全局環境下裝過gulp就沒必要再裝了，只需

npm init

　　

這會初始化一個package.json文件而不用手動建立，而後

npm install gulp --save-dev

　　

將gulp安裝到本項目文件夾，那麼項目的文件將會是這樣的

但是一不當心我遇到過這樣的問題，不知道是什麼緣由，麻煩知道大俠的解釋下。

 

我只知道解決辦法是先刪除node_modules文件夾和package.json文件，而後先執行

npm install gulp

　　

而後再新建package.json，再npm install gulp –save-dev

/*====================================================================*/

gulpfile.js文件結構清晰，羅列一下經常使用的插件：

1. 語法檢查   （gulp-jshint）
2. 合併文件   （gulp-concat）
3. 壓縮代碼   （gulp-uglify）
4. 文件重命名（gulp-rename）

npm install gulp-jshint gulp-concat gulp-uglify gulp-rename --save-dev

　　

gulpfile.js文件以下

var gulp = require('gulp');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
 
// 語法檢查
gulp.task('jshint', function(){
return gulp.src('src/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
 
// 編譯Sass
// gulp.task('sass', function() {
// gulp.src('./scss/*.scss')
// .pipe(sass())
// .pipe(gulp.dest('./css'));
// });
 
// 合併文件以後壓縮代碼
gulp.task('minify', function(){
return gulp.src('src/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
 
//監視文件變化
gulp.task('watch', function(){
gulp.watch('src/*.js', ['jshint', 'minify']);
});
 
//註冊任務
gulp.task('default', ['jshint', 'minify', 'watch']);

　　

多看多查多找，每每會有不少收穫。

參考文章：

gulp API 文檔

前端構建工具gulp入門教程

Gulp入門教程

Gulp， 比Grunt更好用的前端構建工具

gulp徹底開發指南 => 快來換掉你的Grunt吧