Gulp Cheat Sheet

安装

全局安装

1
$ npm install --global gulp

项目安装

1
$ npm install --save-dev gulp

使用

创建gulpfile.js文件

1
2
3
4
5
var gulp = require('gulp');

gulp.task('default', function() {
// place code for your default task here
});

运行

1
$ gulp

简单应用

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
/**
* Zhimei360
* Created By Misael@2014
*/


var gulp = require('gulp');
var gutil = require('gulp-util');
var notify = require('gulp-notify');
var sass = require('gulp-ruby-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglifyjs');
var rename = require('gulp-rename');
var concat = require('gulp-concat');

var exec = require('child_process').exec;
var sys = require('sys');

//SrcAssets
var assetsDir = 'app/assets/';
var sassDir = assetsDir + 'sass/';
var targetCSSDir = sassDir + 'css/';
//DestinationAssets
var publicAssetsDir = 'public/assets/';
var publicCSSDir = publicAssetsDir + 'css/';
var publicJSDir = publicAssetsDir + 'js/';

//PHPunit For Laravel Framework
gulp.task('phpunit', function () {
exec('vendor/bin/phpunit', function (error, stdout) {
sys.puts(stdout);
})
});

//Compressed Global CSS files
gulp.task('global_css', function () {
gulp.src(assetsDir + 'css/global/**.css')
.pipe(minifycss({keepSpecialComments: false}))
.pipe(concat('base.min.css'))
.pipe(gulp.dest(publicCSSDir));
});

//Compressed Global JS files
gulp.task('global_js', function () {
gulp.src([
assetsDir + 'js/global/jquery-1.10.1.min.js',
assetsDir + 'js/global/jquery-migrate-1.2.1.min.js',
assetsDir + 'js/global/jquery-ui-1.10.1.custom.min.js',
assetsDir + 'js/global/bootstrap.min.js',
assetsDir + 'js/global/jquery.slimscroll.min.js',
assetsDir + 'js/global/jquery.blockui.min.js',
assetsDir + 'js/global/jquery.cookie.min.js',
assetsDir + 'js/global/jquery.uniform.min.js',
assetsDir + 'js/global/app.js',
])
.pipe(concat('base.min.js'))
.pipe(uglify())
.pipe(gulp.dest(publicJSDir));
});

gulp.task('css', function () {
gulp.src(sassDir + '/custom.scss')
.pipe(sass({style: 'compressed'}).on('error', gutil.log))
.pipe(autoprefixer('last 10 version'))
.pipe(gulp.dest('public/assets/zm/css/'))
.pipe(notify('CSS compiled, prefixed, and minifyed.'));
});

gulp.task('page_css', function () {
gulp.src(sassDir + '/page/app.scss')
.pipe(sass({style: 'compressed'}).on('error', gutil.log))
.pipe(autoprefixer('last 10 version'))
.pipe(gulp.dest('public/assets/zm/css/page/'))
.pipe(notify('CSS compiled, prefixed, and minifyed.'));
});

gulp.task('mobile_css', function(){
gulp.src(sassDir + '/mobile/*.scss')
.pipe(sass({style: 'compressed'}))
.pipe(minifycss({keepSpecialComments: false}))
.pipe(concat('mobile_global.min.css'))
.pipe(gulp.dest('public/assets/mobile/css/'));
});

gulp.task('watch', function () {
gulp.watch(sassDir + '/*.scss', ['css']);
gulp.watch(sassDir + '/page/*.scss', ['page_css']);
gulp.watch(sassDir + '/mobile/*.scss', ['mobile_css']);
gulp.watch('app/tests/**/*.php', ['phpunit']);
});

gulp.task('default', ['watch']);