构建工具-Gulp快速入门

一、Gulp简单介绍

中文地址：

Gulp中文官网

Gulp简介:

它是一个于grunt功能类似的前端项目构建工具，也是基于nodejs的自动任务运行器，能自动化完成js/coffee/css/sass/less/html/image等文件的合并、压缩、检查、监听文件变化、浏览器自动刷新、测试等任务，它相比于grunt更高效（异步多任务），更易于使用，插件高质量

Gulp使用：

使用前，当然也是要确认nodejs是否安装

node -v

全局下载gulp

npm i -g gulp

局部下载gulp

npm i gulp --save-dev

接下来我们新建一个项目文件gulp_test,创建如下文件目录

1、我们先来看下js的合并、压缩、重命名

首先需要下载相关插件（gulp-concat ,gulp-uglify,gulp-rename,gulp-cli）

npm i gulp-concat gulp-uglify gulp-rename gulp-cli --save-dev

其次来配置下gulpfile.js配置文件

var gulp   =require("gulp");  //引入gulp对象
var concat =require("gulp-concat"); //引入对应插件,这里引入的concat是函数
var uglify =require("gulp-uglify");
var rename =require("gulp-rename");

gulp.task("js",function(){
	return gulp.src('src/js/*.js')    //找到目标源文件，将数据读取到gulp的内存中
	.pipe(concat('build.js'))    //concat()里指定合并后的文件名
	.pipe(gulp.dest('./dist/js/'))  //临时输出合并后的文件到本地，这里指定输出路径
	.pipe(uglify())     			//压缩
	.pipe(rename({suffix:".min"}))    //重命名
	.pipe(gulp.dest('./dist/js/'))    //最终输出
})

gulp.task('default',function(){   //注册默认任务
	
}) 

执行对应任务：gulp 指定任务名，在这里我们直接：gulp js即可

看到dist目录下有生成js目录及相关两个文件（build.js、build.min.js）就说明配置正确

2、less文件处理（gulp-less）

下载对应插件gulp-less

npm i gulp-less --save-dev

在src/less下新建一个test3.less文件

@coloe1: "red";   //用less变量的语法来区分css

.div1{
	height: 100px;
	width: 100px;
	background-color: @coloe1;   //引用变量
}

修改gulpfile.js文件

var gulp   =require("gulp");  //引入gulp对象
var concat =require("gulp-concat"); //引入对应插件,这里引入的concat是函数
var uglify =require("gulp-uglify");
var rename =require("gulp-rename");
var less =require("gulp-less");    //引入gulp-less插件

gulp.task("js",function(){
	return gulp.src('src/js/*.js')    //找到目标源文件，将数据读取到gulp的内存中
	.pipe(concat('build.js'))    //concat()里指定合并后的文件名
	.pipe(gulp.dest('./dist/js/'))  //临时输出合并后的文件到本地，这里指定输出路径
	.pipe(uglify())     			//压缩
	.pipe(rename({suffix:".min"}))    //重命名
	.pipe(gulp.dest('./dist/js/'))    //最终输出
})

//增加一条less文件处理任务
gulp.task("less",function(){
	return gulp.src('src/less/*.less')    //找到目标源文件，将数据读取到gulp的内存中
	.pipe(less())     //编译处理less文件
	.pipe(gulp.dest('./src/css/'))    //将处理后的css文件输出到src目录下
})

gulp.task('default',function(){   //注册默认任务
	
}) 

执行 gulp less ，可以看到编译后的文件已经将less语法转成css了

3、css文件合并、压缩（gulp-concat+gulp-clean-css）

下载对应插件gulp-clean-css

npm i gulp-clean-css --save-dev

再在src/css文件夹中新建两个样式文件，刚才我们把less编译后的css文件也放到了这个文件下，就是未了这一步我们将三个文件进行合并、压缩

//test1.css

.div1{
	color: aqua;
}

//test2.css

.div1{
	font-size: 20px;
}

然后修改gulpfile配置文件，新增css合并压缩任务

var gulp   =require("gulp");  //引入gulp对象
var concat =require("gulp-concat"); 
var uglify =require("gulp-uglify");
var rename =require("gulp-rename");
var less =require("gulp-less");
var cssClean =require("gulp-clean-css");  //引入css压缩插件

gulp.task("js",function(){
	return gulp.src('src/js/*.js')  
	.pipe(concat('build.js'))   
	.pipe(gulp.dest('./dist/js/'))  
	.pipe(uglify())     	
	.pipe(rename({suffix:".min"}))   
	.pipe(gulp.dest('./dist/js/')) 
})


gulp.task("less",function(){
	return gulp.src('src/less/*.less')    
	.pipe(less())
	.pipe(gulp.dest('./src/css/'))

})

gulp.task("css",function(){     //css文件合并、压缩任务
	return gulp.src('src/css/*.css')
	.pipe(concat('build.css'))
	.pipe(rename('build.min.css'))
	.pipe(cssClean({suffix:".min"}))
	.pipe(gulp.dest('dist/css/'))
})

gulp.task('default',function(){   //注册默认任务
	
}) 

执行gulp css，可以看到dist目录下有css和build.min.css文件输出，可以看到已经把那三个css文件的样式内容合并到了一起，并做了压缩

然后我们可以在html中引入下合并压缩后的css文件，看下样式是否正常生效

4、使用默认任务，对多个任务集中处理

gulp.task('default',gulp.series("js","less","css"))  //同步执行任务

这样配置好后，执行gulp，可以看到控制台输出界面如下：

个人理解：这应该是同步地去执行任务

查看官网api，发现还有一个方法叫parallel（），它同样也是对多任务进行集中处理的，它的效果就是异步处理多个任务

5、html压缩

下载插件：npm i gulp-htmlmin --save-dev

修改gulpfile配置文件，新增html压缩任务，并添加到默认任务中

var htmlMin = require("gulp-htmlmin"); //引入插件

//注册html压缩任务
gulp.task("htmlmin",function(){
	return gulp.src('index.html')
	.pipe(htmlMin({collapseWhitespace:true}))  //除去空格
	.pipe(gulp.dest('dist/'))
})

gulp.task('default',gulp.parallel("js","less","css","htmlmin"))  //异步执行任务

配置ok后，直接执行gulp，可以看到如下界面

6、监听文件变化

下载插件：npm install --save-dev gulp-livereload

修改配置文件

var liveReload = require('gulp-livereload');  //引入插件

gulp.task("watch", function() {
  liveReload.listen();    //开启监听
  gulp.watch('src/css/*.css',gulp.series('css'));   //监听css/下面的css文件，有改变后执行css任务
});

配置完后执行:gulp watch（下图说明正在监听中）