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：
i是install的缩写
-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文件，然后监听scss，js，img(文件夹内容)，html的改变实时更新浏览器。

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

以上