一、安装
1.安装gulp
npm install -g gulp
2.检查gulp 版本
gulp -v
3.在项目文件夹下安装gulp
npm install --save-dev gulp
二、压缩JS
1.安装gulp-uglify模块
npm install gulp-uglify
2.在项目根目录创建gulpfile.js文件
3.在gulpfile.js文件中写入代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 | // 获取 gulp
var gulp = require('gulp');
// 获取 uglify 模块(用于压缩 JS)
var uglify = require('gulp-uglify');
// 压缩 js 文件
// 在命令行使用 gulp script 启动此任务
gulp.task('jscompress', function() {
// 1. 找到文件
return gulp.src('js/1.js')
// 2. 压缩文件
.pipe(uglify())
// 3. 另存压缩后的文件
.pipe(gulp.dest('dist/js'));
}); |
4.命令行中切换到gulpfile.js所在的目录,执行如下命令开始压缩
gulp script
5.在gulpfile.js中添加自动监视任务
1
2
3
4
5 | // 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
// 监听文件修改,当文件被修改则执行 script 任务
gulp.watch('js/1.js', ['jscompress']);
}); |
6.在gulpfile.js中设置默认任务(即命令行中输入gulp执行的任务)
1
2
3 | // 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 script 任务和 auto 任务
gulp.task('default', ['auto']); |
三、压缩CSS
1.安装gulp-clean-css模块
npm install gulp-clean-css
2.在gulpfile.js文件中添加相应任务
1
2
3
4
5
6
7
8
9
10
11
12
13 | // 获取 cleancss 模块(用于压缩 CSS)
var cleanCSS = require('gulp-clean-css');
// 压缩 css 文件
// 在命令行使用 gulp csscompress 启动此任务
gulp.task('csscompress', function() {
// 1. 找到文件
return gulp.src('css/my.css')
// 2. 压缩文件
.pipe(cleanCSS())
// 3. 另存压缩后的文件
.pipe(gulp.dest('dist/css'));
}); |
3.修改添加对应的自动监视任务
1
2
3
4
5
6 | // 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
// 监听文件修改,当文件被修改则执行 script 任务
gulp.watch('js/1.js', ['jscompress']);
gulp.watch('css/my.css', ['csscompress']);
}); |
四、重命名文件
1.安装gulp-rename模块
npm install gulp-rename
2.修改gulpfile.js内代码
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 | // 获取 gulp
var gulp = require('gulp');
// 获取 uglify 模块(用于压缩 JS)
var uglify = require('gulp-uglify');
// 获取 cleancss 模块(用于压缩 CSS)
var cleanCSS = require('gulp-clean-css');
var rename = require("gulp-rename");
var gutil = require('gulp-util');//错误信息输出
// 压缩 js 文件
// 在命令行使用 gulp jscompress 启动此任务
gulp.task('jscompress', function() {
// 1. 找到文件
return gulp.src('js/1.js')
.pipe(rename({suffix: '.min'}))
// 2. 压缩文件
.pipe(uglify())
.on('error', function (err) { gutil.log(gutil.colors.red('[Error]'), err.toString()); })//错误信息输出
// 3. 另存压缩后的文件
.pipe(gulp.dest('dist/js'));
});
// 压缩 css 文件
// 在命令行使用 gulp csscompress 启动此任务
gulp.task('csscompress', function() {
// 1. 找到文件
return gulp.src('css/my.css')
.pipe(rename({suffix: '.min'}))
// 2. 压缩文件
.pipe(cleanCSS())
// 3. 另存压缩后的文件
.pipe(gulp.dest('dist/css'));
});
// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
// 监听文件修改,当文件被修改则执行 script 任务
gulp.watch('js/1.js', ['jscompress']);
gulp.watch('css/my.css', ['csscompress']);
});
// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 script 任务和 auto 任务
gulp.task('default', ['auto']); |
五、增加ES6支持
1.安装gulp-babel模块
npm install --save-dev babel-core gulp-babel babel-preset-es2015
2.修改文件
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 | // 获取 gulp
var gulp = require('gulp');
// 获取 uglify 模块(用于压缩 JS)
var uglify = require('gulp-uglify');
// 获取 cleancss 模块(用于压缩 CSS)
var cleanCSS = require('gulp-clean-css');
var rename = require("gulp-rename");
var gutil = require('gulp-util');
var babel = require('gulp-babel');
// 压缩 js 文件
// 在命令行使用 gulp jscompress 启动此任务
gulp.task('jscompress', function() {
// 1. 找到文件
return gulp.src('js/1.js')
.pipe(rename({suffix: '.min'}))
//babel转码
.pipe(babel({
presets: ['es2015']
}))
// 2. 压缩文件
.pipe(uglify())
.on('error', function (err) { gutil.log(gutil.colors.red('[Error]'), err.toString()); })
// 3. 另存压缩后的文件
.pipe(gulp.dest('js'));
});
// 压缩 css 文件
// 在命令行使用 gulp csscompress 启动此任务
gulp.task('csscompress', function() {
// 1. 找到文件
return gulp.src('css/my.css')
.pipe(rename({suffix: '.min'}))
// 2. 压缩文件
.pipe(cleanCSS())
// 3. 另存压缩后的文件
.pipe(gulp.dest('css'));
});
// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
// 监听文件修改,当文件被修改则执行 script 任务
gulp.watch('js/1.js', ['jscompress']);
gulp.watch('css/my.css', ['csscompress']);
});
// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 script 任务和 auto 任务
gulp.task('default', ['auto']); |