gulp.js使用小结
本文由 小茗同学 发表于 2016-07-06 浏览(1343)
最后修改 2016-09-23 标签:gulp nodejs 前端 构建 工具

介绍

gulp是一款前端构建工具。

安装

npm install -g gulp
npm install -g gulp-sass gulp-concat gulp-uglify gulp-rename

网上到处都是说不要全局安装,每一个项目下面都要自己重新安装一遍,说是什么避免版本不同造成一些问题,我就纳闷了,这玩意儿又不属于我代码的一部分,难道我100个项目要安装100次?有必要么?最坑爹的是文件数量那么多,强迫症看了都要吐血了,真不知道现代人的思想都是怎么想的。

事实上,默认情况下全局安装后在项目下运行gulp时会提示如下错误:

Local gulp not found in
Try running: npm install gulp

但是正确配置了NODE_PATH环境变量之后就不会有这个提示了。

使用

在项目根目录下新建一个名为gulpfile.js的文件,然后从该目录打开命令行执行gulp即可开始构建,现在主要的问题就是如何编写这个文件。

gulp这玩意合并文件有一个很大的缺点,就是如果指定合并JS的顺序的话,必须将所有JS文件列举出来,还是挺麻烦的。

下面是我常用的文件模板,作用是将src下面的所有js合并输出到dist目录下的all.js,同时压缩一份成all.min.js

var gulp = require('gulp'); // 引入gulp
var concat = require('gulp-concat'); // 合并
var uglify = require('gulp-uglify'); // 压缩
var rename = require('gulp-rename'); // 改名

// var js = ['./src/*.js']; // 直接这样写的话无法指定JS合并顺序
var js = 
[
	'src/a.js',
	'src/b.js',
	'src/c.js'
];

// 合并,压缩文件
gulp.task('default', function()
{
	gulp.src(js)
		.pipe(concat('all.js'))
		.pipe(gulp.dest('./dist'))
		.pipe(rename('all.min.js'))
		.pipe(uglify())
		.pipe(gulp.dest('./dist'));
});

下面是某网友写的一个版本,还没仔细实践过,先贴这里:

// 引入 gulp
var gulp = require('gulp'); 

// 引入组件
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

// 检查脚本
gulp.task('lint', function() {
	gulp.src('./js/*.js')
		.pipe(jshint())
		.pipe(jshint.reporter('default'));
});

// 编译Sass
gulp.task('sass', function() {
	gulp.src('./scss/*.scss')
		.pipe(sass())
		.pipe(gulp.dest('./css'));
});

// 合并,压缩文件
gulp.task('scripts', function() {
	gulp.src('./js/*.js')
		.pipe(concat('all.js'))
		.pipe(gulp.dest('./dist'))
		.pipe(rename('all.min.js'))
		.pipe(uglify())
		.pipe(gulp.dest('./dist'));
});

// 默认任务
gulp.task('default', function(){
	gulp.run('lint', 'sass', 'scripts');

	// 监听文件变化
	gulp.watch('./js/*.js', function(){
		gulp.run('lint', 'sass', 'scripts');
	});
});

参考

http://www.cnblogs.com/2050/p/4198792.html

http://www.tuicool.com/articles/FJVNZf