使用Gulp压缩CSS/JS

一、安装

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']);

转载于:https://my.oschina.net/u/2391658/blog/3024763

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值