最近接触到一个前端自动化构建工具gulp,我发现这个东西易学好用,可以很好的处理前端开发的一些问题。我想前端开发经常需要进行css或js文件的合并、压缩、重命名等操作。如果项目文件很大的话,手工操作这一些将不可以想象,而gulp可以很好的处理这一些问题。
gulp是一个基于nodejs命令行的工具,我们可以使用npm安装它:
npm install gulp
要想进行前端文件的各种操作,我们还需要使用npm下载一些gulp插件。比如:gulp-minify-css压缩css文件,gulp-uglify压缩js文件,gulp-rename重命名文件,gulp-concat合并文件,以及del删除文件等。下面我们就来讲解一下gulp到底如何操作。
1. 创建gulpfile.js文件
我们需要在项目的根目录下创建一个叫做gulpfile.js的文件(不要改变这个文件的名字)。
2. 在gulpfile.js文件中引入我们下载的gulp和其他插件:
var gulp=require('gulp');
var minify = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var del = require('del');
var concat = require('gulp-concat');
3.创建gulp的task
我们可能想要使用gulp去进行某个操作,比如文件压缩。这样的一个操作就是一个task。
gulp.task("myTask",function(){
console.log("hello world");
});
这样就创建了一个项目,在这个项目中,“myTask”是我task的名字,我们只是输出一个"hello world",要想运行这个task,我们可以将命令行切换到项目的根路径下,运行命令
gulp myTask
这样我们就可以在命令行看到我们的输出结果:
gulp后面可以接多个task的名字,比如gulp task1 task2 task3 ...。如果只是运行gulp命令的话,默认运行的是一个叫做default的task。
好了,现在我们知道如何创建task了,我们再来看看我们如何在task中对文件进行其他操作。
4.压缩css文件
//压缩css文件
gulp.task("minifyCss",function(){
//console.log("hello world");
gulp.src('www/css/*.css')
.pipe(minify())
.pipe(gulp.dest("minified_css"));
});
在这里,我们创建了一个叫做minifyCss的task,其中gulp.src()里面的参数表示我们想要操作的目标文件的路径,其中“*“表示在css目录下所以以.css结尾的文件,minify()就是表示压缩目标文件,gulp.dest()的参数表示目标文件压缩后,我们想把压缩文件放到的路径,如果这个路径不存在,将自动创建这个路径,pipe类似于linux的管道命令,就是前一个命令的结果作为后一个命令的参数。
上面代码的意思就是:将www/css路径下所有的后缀名为.css的文件进行压缩,并将压缩的文件放到minified_css目录下。
知道了如何压缩css文件,其他操作就类似了,下面我将给出其他操作,具体含义就不解释了。
5.压缩js文件
//压缩js文件
gulp.task("minifyJs",function(){
//console.log("hello world");
gulp.src('www/js/*.js')
.pipe(uglify())
.pipe(gulp.dest("minified_js"));
});
6.删除文件或目录
//删除文件
gulp.task("deleteFile",function(){
del(['minified_css',"minified_js"]);
});
7.合并文件和重命名
//合并文件到main.js,然后再将main.js改名为main.min.js
gulp.task("concatFile",function(){
gulp.src("www/js/*.js")
.pipe(concat("main.js"))
.pipe(uglify())
.pipe(rename({suffix:'.min'}))
.pipe(gulp.dest("./"));
});
8.task的依赖注入
我们的某个task可能依赖于另一个task,只有另一个task完成后,才执行,gulp也为我们提供了依赖注入,比如我们现在修改压缩js文件的task。
//压缩js文件
gulp.task("minifyJs",['deleteFile'],function(){
//console.log("hello world");
gulp.src('www/js/*.js')
.pipe(uglify())
.pipe(gulp.dest("minified_js"));
});
修改的task,就是需要先执行完deleteFile任务后,才会执行minifyJS任务。
9.同时运行多个task
如果要想同时运行多个task,我们可以gulp命令行接多个task名字,但除了这种方式,我们还可以利用默认的task,直接输入gulp命令就行了。
gulp.task("default",function(){
gulp.start('concatFile','minifyCss');
});
在gulp.start()的参数,就是所要运行的所有task。