前端自动化构建工具gulp使用指南

    最近接触到一个前端自动化构建工具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。