gulp 几个用法，打包,压缩,监听文件

最新推荐文章于 2024-09-05 12:11:21 发布

夜色镇议员

最新推荐文章于 2024-09-05 12:11:21 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： gulp NodeJs

本文链接：https://blog.youkuaiyun.com/wocaonima332/article/details/53377796

NodeJs 同时被 2 个专栏收录

3 篇文章

订阅专栏

gulp

1 篇文章

订阅专栏

本文介绍如何使用Gulp进行自动化任务配置，包括合并多个JS和CSS文件、压缩JS文件及监听文件变化的方法。

一、首先，最重要的一点代码的文件名必须是 gulpfile.js.

二，写法

1.合并多个js文件

var gulp = require('gulp'),
    concat = require('gulp-concat');
 
gulp.task('testConcat', function () {
    gulp.src('src/js/*.js')
        .pipe(concat('all.js'))//合并后的文件名
        .pipe(gulp.dest('dist/js'));
});

2.合并多个css


var gulp = require('gulp'),
    cssmin = require('gulp-minify-css');
 
gulp.task('testCssmin', function () {
    gulp.src('src/css/*.css')
        .pipe(cssmin())
        .pipe(gulp.dest('dist/css'));
});

更多可看 http://www.ydcss.com/archives/41

3.压缩

var gulp = require('gulp'),
    uglify= require('gulp-uglify');
 
gulp.task('jsmin', function () {
    //压缩src/js目录下的所有js文件
    //除了test1.js和test2.js（**匹配src/js的0个或多个子文件夹）
    gulp.src(['src/js/*.js', '!src/js/**/{test1,test2}.js']) 
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});

4.监听文件变化。

var gulp = require('gulp'); 
gulp.task('watch', function () {
    gulp.watch('./*.js', function (event) {
        console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
        var exec = require('child_process').exec;    
		var child = exec('node app.js', function(err, stdout, stderr) {
		  if (err) throw err;
		  console.log("启动");    
		});
    });
});

三、启动方式

命令行执行 gulp +任务名， 如 gulp testConcat。

也可以通过 exec来执行。如上，监听到文件变化，就重启app.js