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吧