今天我们来说收自动化构建工具的第二个Gulp，通过对于Gulp的学习，个人感觉，确实是比Grunt好用些。
首先，Gulp拥有自己的内存，文件一直存在于Gulp内存中进行操作，其次Gulp使用commonjs那样的语法，引入Gulp的包，返回gulp对象，通过对象的方法，去执行任务（如：查找要调用的源文件），然后通过链式调用的方法，调用pipe，把文件一直放在Gulp的内存里，再进行各种任务处理（如：合并，压缩），最后再进行输出。
首先，我们按照如下规则创建目录
|- dist
|- src
|- js
|- css
|- less
|- index.html
|- gulpfile.js-----gulp配置文件
|- package.json
{
"name": "gulp_test",
"version": "1.0.0"
} 如果想使用Gulp，还是先需要使用npm下载：
安装gulp:
* 全局安装gulp
```
npm install gulp -g
```
* 局部安装gulp
```
npm install gulp --save-devGulp与Grunt一样，都是在命令行运行程序的，Gulp只要在命令行输入gulp，即可执行运行gulp
当然了，想运行gulp还是要进行任务配置的，这时，我们打开gulpfile.js这个文件，开始我们的配置。
开始，我们需要引入gulp的包，使用返回的gulp对象进行操作。
//这是引入gulp的包，才可以进行任务配置
var gulp = require("gulp");然后使用gulp.task方法，创建两个方法，一个是必须有的默认任务（输入gulp就会执行），一个是自定义任务
gulp.task("js",function () {
})
//注册默认任务，在命令行输入gulp时，默认任务就会执行
gulp.task("default",[]);方法中，必须要先写return，然后使用gulp.src找到你要的文件，然后文件就会进入gulp的内存
gulp.task("js",function () {
//必须要先写return，然后使用gulp.src找到你要的文件，然后文件就会进入gulp的内存
return gulp.src("src/js/*.js")
})如果我们想进行合并，压缩等操作，就必须引入相应的插件，在npm进行下载
npm install gulp-concat gulp-uglify gulp-rename --save-dev
再在gulpfile.js中进行导入
//引入插件
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");再在我们自定义的方法中，使用链式调用，并且用这些插件执行任务
return gulp.src("src/js/*.js")
//使用pipe对内存中的数据进行处理，pipe函数中放入gulp的插件进行具体任务操作
.pipe(concat("build.js"))//concat代表合并文件
.pipe(uglify())//uglify代表文件的压缩
.pipe(rename("build.min.js"))//重命名文件，rename函数的参数为新的文件名
.pipe(gulp.dest("dist/js/"))//最后使用gulp.dest(输入位置)来输出文件。最后，在命令行中，输入 gulp 就可以执行了。
我把总体的代码贴上来
//这是引入gulp的包，才可以进行任务配置
var gulp = require("gulp");
//引入插件
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
//首先要注册任务
//gulp.task(任务名,function(){将你的任务的任务代码放在这}),这是gulp注册任务的固定函数,任务名自己定义就好了。
gulp.task("js",function () {
//必须要先写return，然后使用gulp.src找到你要的文件，然后文件就会进入gulp的内存
return gulp.src("src/js/*.js")
//使用pipe对内存中的数据进行处理，pipe函数中放入gulp的插件进行具体任务操作
.pipe(concat("build.js"))//concat代表合并文件
.pipe(uglify())//uglify代表文件的压缩
.pipe(rename("build.min.js"))//重命名文件，rename函数的参数为新的文件名
.pipe(gulp.dest("dist/js/"))//最后使用gulp.dest(输入位置)来输出文件。
})
//注册默认任务，在命令行输入gulp时，默认任务就会执行
gulp.task("default",[]);-----------------------------------------------------------------------------------------------------------------------------
接下来，我们进行less的编译和css的合并压缩
还是先下载插件: npm install gulp-less gulp-clean-css --save-dev
首先进行less的编译，先导入gulp-less
var less = require("gulp-less");然后创建一个less文件，在src/less/test3.less
@base: yellow;
.index1 { color: @base; }
.index2 { color: green; }再在gulpfile.js中进行任务的配置
//less打包任务
gulp.task("less",function () {
//比较简单，先找到要编译的文件
gulp.src("src/less/*.less")
//用less()方法进行编译
.pipe(less())
//最后使用gulp.dest("路径")进行输出
.pipe(gulp.dest("src/css/"))
})最后在命令行输入 gulp less 执行任务。我们会在src/css/中得到test3.css这个文件。
.index1 {
color: yellow;
}
.index2 {
color: green;
}-------------------------------------------------------------------------------------------------------------------------------
less编译完毕，接下里，我们进行css的合并压缩
因为之前下载过了，这次，我们直接导入就可以了
var cleanCss = require("gulp-clean-css");我们先创建一个css文件 src/css/index.css
.box1{
height: 100px;
width: 100px;
background-color: blue;
}
.box2{
height: 150px;
width: 150px;
background-color: red;
}然后在gulpfile.js中进行任务配置
//css合并压缩
gulp.task("cleancss",function () {
//找到要合并压缩的css文件
gulp.src("src/css/*.css")
//合并css文件，concat这个方法既可以合并js，也可以合并css，且必须传入一个文件名作为合并后文件的文件名
.pipe(concat("build.css"))
//使用cleanCss()方法进行压缩
.pipe(cleanCss())
//给文件一个新文件名
.pipe(rename("build.min.css"))
//最后进行文件输出
.pipe(gulp.dest("dist/css/"))
})最后在命令行窗口输入 gulp cleancss 就可以了。
--------------------------------------------------------------------------------------------------------------------------------
关于gulp任务执行上，有同步，异步两种方法，如果直接把任务添加到defale这个任务中，如果每个任务中先用return进行返回，则任务是异步执行，如果没有用return，则是同步执行。
异步 执行虽然很快，没有阻塞，但是也有一些问题，如，合并css任务则需要less编译任务先执行完毕，即：css任务依赖与less任务。
异步解决：这是我们就可以在任务方法的第二个参数添加一个数组，数组中填写依赖的任务就可以了，这样，当执行到该任务时，会先执行依赖任务到完毕，才会执行该任务。
//第二个数组参数中填写的任务是依赖任务，只有依赖任务执行完毕，才会执行任务本身。
gulp.task("cleancss",["less"],function () {
})--------------------------------------------------------------------------------------------------------------------
接下来进行html的压缩，还是先用npm下载。
npm install gulp-htmlmin --save-dev
导入包
var htmlmin = require("gulp-htmlmin");//压缩html
gulp.task("htmlmin",function (){
//找到要压缩的html文件
gulp.src("index.html")
//pipe中传入htmlmin方法，collapseWhitespace表示是否清除无用空格
.pipe(htmlmin({
collapseWhitespace: true
}))
//输出文件
.pipe(gulp.dest("dist/"))
})----------------------------------------------------------------------------------------------------------------------------------
普通的一些任务，我们都说的差不多了，接下里，我们说说自动化任务的构建吧，就是每次改变源文件，都自动进行相应的任务编译，打包处理。
要想进行自动化的任务，还是要先下载插件， npm install gulp-livereload --save-dev
然后引包
var livereload = require("gulp-livereload");进行自动化任务的任务配置
//半自动化任务构建，运行该任务时，会先把默认任务队列的任务执行一遍。
gulp.task("watch",["default"],function () {
//首先使用livereload对象开启监听
livereload.listen();
//然后监控文件，和文件发生变化应该执行的任务。
gulp.watch(["src/js/*.js"],["js"]);
gulp.watch(["src/css/*.css","src/less/*.less"],["cleancss"]);
gulp.watch(["index.html"],["htmlmin"]);
})然后在每个具体的任务最后一行加上
.pipe(livereload())加上之后，可以更稳定的显示最新的效果。
在命令行窗口输入 gulp watch 执行任务，执行后，就发现光标一直在闪烁，这时，如果修改源文件的话，就会自动进行编译了。
---------------------------------------------------------------------------------------------------------------------------------
有小伙伴可能注意到了，我的注释写的是半自动化任务，想想，如果我们修改源文件后，未打开的页面自动打开，打开的页面自动刷新，是不是会更好呢？
下载 npm install gulp-connect open --save-dev
引包
var connect = require("gulp-connect"); //自动热加载
var open = require("open");//打开与刷新文件配置
//进行全自动任务的配置，这个包内置一个微型服务器，运行之后，会有一个地址，访问之后
// ，就是主页面的地址。
gulp.task("server",["default"],function () {
//对于服务器的配置
connect.server({
//所有资源的根目录，如主页面引入了css文件，地址是css/build.min.css
//有了根目录，会在dist/目录下寻找css/build.min.css
root:"dist/",
//是否实时刷新
livereload:true,
//端口号
port:5000
})
//独立与gulp的插件，需要重新下载，任务运行自动打开，文件变化就自动刷新
open("http://localhost:5000/");
//监控的文件，以及执行的相应任务。
gulp.watch(["src/js/*.js"],["js"]);
gulp.watch(["src/css/*.css","src/less/*.less"],["cleancss"]);
gulp.watch(["index.html"],["htmlmin"]);
})---------------------------------------------------------------------------------
最后，来看看我们引入了多少gulp的插件吧
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");
var htmlmin = require("gulp-htmlmin");
var livereload = require("gulp-livereload");
var connect = require("gulp-connect");足足有八个，这还是一个不太完善的自动化，包太多了，引入也麻烦，所以，gulp有一个包的管理器，引入一个管理器，这些包都在管理器里面。
下载 npm install gulp-load-plugins --save-dev
引包
var $ = require("gulp-load-plugins")();引入： var $ = require('gulp-load-plugins')();！！！引入的插件是个方法，必须记住调用
* 所有的插件用 $ 引出，其他插件的方法名统一为插件的功能名字(即插件名字的最后一部分)：如：concat,connect,cssmin...
gulp.task('lib', function() {
gulp.src('bower_components/**/*.js')
.pipe(gulp.dest(app.devPath + 'vendor'))
.pipe(gulp.dest(app.prdPath + 'vendor'))
.pipe($.connect.reload());
});
扫一扫
584
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
