Gather ye rosebuds while ye may

快速上手使用 Gulp


这篇文章的目的是让你使用Gulp。
前提:你要至少了解NPM,Gulp是什么,对前端开发的流程有个大概的概念。
如果你想知道Gulp是什么,那么请你先看Gulp的官方文档(英文)
我第一次看中文官方文档时并没有怎么看懂。
要感谢css魔法的博客中对Gulp4入门指南的翻译


我默认你已经安装了npm。
并全局安装了gulp:

1
npm i -g gulp

在gulp配置文件之前

项目文件夹结构如下

1
2
3
4
5
6
7
8
9
10
11
12
-app
index.html
-css
main.scss
-img
-js
dropdown.js
scroll.js
-DIST
gulpfile.js
-node_modules
package.json

下面是需要在项目文件夹根目录执行的命令
1
2
3
npm init
cnpm i -D gulp-sass gulp-uglify gulp-concat gulp-concat-css gulp-clean-css gulp-merge-link gulp-zip gulp-imagemin gulp-sequence gulp-connect gulp-open gulp gulp-uncss
touch gulpfile.js && open gulpfile.js

npm的小trick:
iinstall的缩写
-D--save-dev的缩写

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
93
94
95
96
97
98
99
100
101
var gulp = require('gulp'),
D = new Date(),
sass = require('gulp-sass'),
concat = require('gulp-concat'),
concatCss = require('gulp-concat-css'),
cleanCSS = require('gulp-clean-css'),
uglify = require('gulp-uglify'),
merge = require('gulp-merge-link'),
zip = require('gulp-zip'),
imagemin = require('gulp-imagemin'),
connect = require('gulp-connect'),
connect = require('gulp-connect'),
gulpOpen = require('gulp-open'),
uncss = require('gulp-uncss')

gulp.task('sass', function() {
return gulp.src('app/css/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('app/css'))
})

gulp.task('sass:watch', function() {
gulp.watch('app/css/*.scss', ['sass'])
})

gulp.task('mergejs', function() {
return gulp.src('app/js/*.js')
.pipe(concat('merged.js'))
.pipe(gulp.dest('app'))
})

gulp.task('mergecss', ['sass'], function() {
return gulp.src('app/css/*.css')
.pipe(concatCss("merged.css"))
.pipe(gulp.dest('app'));
});

gulp.task('minicss', ['mergecss'], function() {
return gulp.src('app/merged.css')
# .pipe(uncss({
html: ['app/*.html']
}))
.pipe(cleanCSS({ compatibility: 'ie8' }))
.pipe(gulp.dest('DIST'));
});

gulp.task('minijs', ['mergejs'], function() {
return gulp.src('app/merged.js')
.pipe(uglify())
.pipe(gulp.dest('DIST'))
});

gulp.task('merge', ['minicss', 'minijs'], function() {
return gulp.src('app/index.html')
.pipe(merge({
'merged.css': ['css/*.css'],
'merged.js': ['js/*.js']
}))
.pipe(gulp.dest('DIST'));
});

gulp.task('zip', ['merge', 'miniimg'], function() {
return gulp.src(['DIST/**'])
.pipe(zip(D.toLocaleString() + '.zip'))
.pipe(gulp.dest('./'))
})

gulp.task('miniimg', function() {
return gulp.src('app/img/*')
.pipe(imagemin())
.pipe(gulp.dest('DIST/img'))
});

gulp.task('reload', function() {
return gulp.src(['app/*.html', 'app/js/*.js', 'app/css/*.scss', 'app/img/*'])
.pipe(connect.reload());
});

gulp.task('build', ['sass', 'mergejs', 'mergecss', 'minijs', 'minicss', 'merge', 'miniimg', 'zip'], function() {
console.log('building files')
})

gulp.task('web', function() {
connect.server({
port: 8878,
livereload: true
});
gulp.src(['app/index.html'])
.pipe(gulpOpen({
uri: 'http://localhost:8878/app'
}));
});

gulp.task('watch', ['web', 'sass'], function() {
gulp.watch('app/css/*.scss', ['sass', 'reload'])
gulp.watch('app/js/*.js', ['reload'])
gulp.watch('app/img/*', ['reload'])
gulp.watch('app/*.html', ['reload'])
})

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

在这里我不解释命令有什么作用,
这篇文章里,你只用知道使用方法和后果。

使用方法

1
2
gulp build
gulp watch

gulp watch会打开本地服务器预览app/index.html文件,然后监听scssjsimg(文件夹内容)html的改变实时更新浏览器。

gulp build则会合并jscss,然后在html中替换原有的对资源的多个请求,然后压缩img文件夹中的图片,复制到DIST文件夹中,最后压缩该文件夹,压缩文件名为执行时间。


以上