Gulp压缩JavaScript代码

时间:2022-04-03 06:00:55

因为gulp是自动化工具,所以我们得告诉它,需要怎么做,才能达到我们的目的。

我们首先得新建一个js文件,用来编写我们的需求,以便gulp能按着我们的意愿来执行。

我将这个js文件取名叫gulpfile.js( 且必须取为gulpfile名,否则在node环境下运行是,会报错:No gulpfile found)

Gulp压缩JavaScript代码

gulpfile.js  的文件内容是

//引入gulp
var gulp = require('gulp');
//引入gulp-uglify模块,用于压缩JS
var uglify = require('gulp-uglify');
//'minjs'为我们自定义的任务名,匿名函数为'minjs'具体任务
gulp.task('minjs', function(){
// 'script/*.js'是需要压缩的js文件
gulp.src('script/*.js')
//uglify()是调用的压缩方法,去压缩js
.pipe(uglify())
//gulp.dest是将压缩后的文件另存为哪的方法,如存到newScript文件夹中
.pipe(gulp.dest('newScript'));
});

然后我们在script文件夹下新建test.js,文件内容自己定,我的是这个样子

Gulp压缩JavaScript代码

然后我们用命令法

Gulp压缩JavaScript代码

但是我们会发现报错

我们需要安装uglify

Gulp压缩JavaScript代码

安装好uglify之后再次执行gulp minjs

Gulp压缩JavaScript代码

打开script下的js文件,会发现文件已经被压缩,OK

Gulp压缩JavaScript代码

但是不知道大家发现上述的代码有个不足没?

如果文件改变了,我们每次都得自己手动在node环境下,输入gulp + 相应任务名执行操作。

说好的自动化呢?

所以我们得修改上述代码,让其自动化--一旦script文件下的js文件变动,就自己自行压缩。

利用gulp.watch方法,可监听文件,来弥补这一不足,如:在这里监听script下的js文件。(一旦变化,就自动压缩)

如下:

修改gulpfile.js,内容如下

//引入gulp
var gulp = require('gulp');
//引入gulp-uglify模块,用于压缩JS
var uglify = require('gulp-uglify');
//引入gulp-watch-path
var watchPath = require('gulp-watch-path');
//'firstScript'为我们自定义的任务名,匿名函数为'firstScript'具体任务
gulp.task('minjs', function(){
// 'script/*.js'是即将压缩的js文件
gulp.src('script/*.js')
//uglify()是调用的压缩方法,去压缩js
.pipe(uglify())
//gulp.dest是将压缩后的文件另存为哪的方法,如存到newScript文件夹中
.pipe(gulp.dest('new'));
});
//新增一个auto任务
gulp.task('auto', function(){
//利用watch方法监听script下的js文件,如果变动,则执行firstScript任务
//gulp.watch('script/*.js', ['minjs']);
//event为gulp.watch回调函数中的event
gulp.watch('script/*.js', function(event){
var paths = watchPath(event, 'script', 'new');
gulp.src(paths.srcPath)
.pipe(uglify())
//paths.distDir为目录文件,如果换成paths.distPath,会报错:file already exists
.pipe(gulp.dest(paths.distDir));
});
});
//将需要默认执行的任务名,添加到default任务中,如,添加上面的‘auto’任务
gulp.task('default',['auto']);

执行以下代码

Gulp压缩JavaScript代码

文件会自动被压缩,OK,小伙伴们去试一试吧