gulp初學

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

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

2、似乎gulp的上手比grunt更簡單一些，或者說一個是輕量級一個是重量級的吧，不能說誰好誰壞，在不同的領域都有各自發揮的特點。

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

1、創建自己的文件夾；

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）
</ol>

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']);</pre>

多看多查多找，往往會有很多收獲。