gulp学习笔记
29 Mar 2015刚记录了下grunt,少不了gulp。
-
首先，安装
npm install -g gulp //全局安装gulp
-
然后还要在项目目录下安装gulp（其实还不是很理解这样做的原理，再看看先）
npm install gulp –save-dev
-
然后项目目录下写
gulpfile.js(同样名字不能改)
1
2
var gulp = require('gulp');
gulp.task('default',function(){});
这样之后在目录下执行：
gulp
-
当然可以定义其他
task（taskA），执行时，gulp taskA
代码：
1
2
3
4
5
gulp.task('taskA',function(){
gulp.src('js/app.js')
.pipe(uglify())
.pipe(gulp.dest('build'));
});
taskA: 将app.js进行
uglify操作，然后输出到build目录下，生成同名文件
uglify需要安装：
npm install gulp-uglify –save-dev
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
//gulpfile.js实例
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
minCss = require('gulp-minify-css'),
concat = require('gulp-concat'),
clean = require('gulp-clean'),
replace = require('gulp-replace');
var vers = require('./vers.json');
console.log(vers);
gulp.task('clean',function(){//清空内容
return gulp.src('dist/').pipe(clean());
});
gulp.task('js', ['clean'], function(){//压缩js
return gulp.src('../src/js/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
gulp.task('css', ['clean'],function(){//压缩css
return gulp.src(['../src/css/**/*.css',
'!../src/css/*old.css',
'!../src/css/reset.css',
'!../src/css/btns.css',
'!../src/css/global.css',
'!../src/css/form.css',
'!../src/css/layout.css'])
.pipe(replace(/@IMAGE_VERSION@/g, vers.v))//替换版本号
.pipe(minCss())
.pipe(gulp.dest('dist/css/'));
});
gulp.task('globalcss', ['clean'], function(){//压缩合并css
return gulp.src(['../src/css/reset.css',
'../src/css/btns.css',
'../src/css/global.css',
'../src/css/form.css',
'../src/css/layout.css'])
.pipe(concat('global.css'))//先合并再做minify
.pipe(minCss())
.pipe(gulp.dest('dist/css/'));
});
gulp.task('default', ['clean','css','globalcss','js'],function(){
var fs = require('fs');
console.log('I am gulp.');
console.log('当前使用版本号：'+vers.v);
fs.writeFile('vers.json', '{"v":'+(vers.v+1)+'}');//结束时自增版本号
});
对比grunt，代码量看起来差不多，但相比之下，可读性比较好，可观。