前言
这几天和一个团队做项目用到gulp,这里写点自己的看法。
首先,来看这篇教程的肯定是听过gulp的,那么一定也了解过nodejs,知道前端自动化工具,可是平时用sublime写代码用的好好的,没觉得需要什么工具来加快开发流程。那么第一个问题一定是“我们为什么用gulp?”
我们为什么用gulp?
首先先问自己一个问题:平时用sass/less写css
,用jade写/html
代码,那么这些文件的的测试
、检查
、合并
、压缩
、格式化、部署,监听
。应该怎么完成呢?就来压缩合并来讲,可以减少多个css,js文件请求,优化网页性能,这样的工作是否应该有一个很好的解决方案呢?---答案就是gulp
gulp与grunt谁好谁坏的争论一直存在,大家可以自行搜索,这里我想说,适合自己的就是最好的,我是前端菜鸟,所以一上手接触的就是gulp。
安装gulp
学习一门技术,最好的途径就是看官方文档。这里我贴出地址
gulp官方网址 gulp插件地址 gulp 官方API gulp中文API
1.通过npm包安装(前提是已经安装了nodejs环境 和 npm)
npm install gulp -g
这里稍微介绍一下命令的含义:因为npm安装插件的命令行格式为
npm install <name> [-g] [--save-dev]
其中 :node插件名称-g
:全局安装。将会安装在全局路径下,并且写入系统环境变量,最直观的感觉就是可以可以通过命令行在任何地方调用它;全局路径 输入npm config get prefix
可以看到路径,我的ubuntu系统显示/usr/local/lib/node_modules/
非全局安装:将会安装在当前定位目录; 本地安装将安装在定位目录的node_modules文件夹下,通过require()调用;--save
:将保存配置信息至package.json(package.json是nodejs项目配置文件);因为node插件太多,不用一个package文件保存插件信息,之后维护和升级会比较麻烦-dev
:保存至package.json
的devDependencies节点,不指定-dev将保存至dependencies节点;
在全局安装完gulp后,运行gulp -v
可以查看gulp版本号
第一个gulp项目
1.先新建一个项目目录:mkdir gulp-file
2.进入这个目录: cd gulp-file
3.再次在本地安装gulp:npm install gulp --save
这样做的目的是为了让gulp开发升级更加灵活,具体的我也不太懂,stackoverflow
上面有人问过这个问题“为什么我要在全局和本地安装两次我的gulp”
4.新建package.json配置文件:npm init
5.会出来一个命令行对话输入
依次填写即可得到你的package.json
文件,ls一下可以查看。
6.接下来假设gulp-flie 项目
开发中还有css,js等文件,我们可以通过配置gulpfile.js文件来进行管理
gulpfile.js配置
7.在根目录下创建配置文件:touch gulpfile.js
8.打开编辑:gedit gulpfile.js
9. gulpfile.js文件内容如下:
var gulp =require("gulp");//创建 gulp模块 var uglify=require("gulp-uglify");//创建js混淆压缩 模块 var minify_css =require("gulp-minify-css"); //创建 css混淆压缩模块 var gulp_concat = require('gulp-concat'); //创建 文件合并模块 以上这5个都是node_modules/里的插件模块。‘ 因为之前没有安装过这些插件,所以得用npm安装
10.安装相应的模块:npm install gulp-uglify gulp-minify-css gulp-concat gulp-rename --save
11.安装完成之后,可以打开package.json
文件,看到相关插件的一些版本信息
12.插件的作用是为了让我们前端开发更加流畅和规范化。
13.这个时候,打开官方文档,发现官网说gulp有4个属性,即src,dest,watch,dask。
**官方API** gulp.task(name[, deps], fn) gulp.src(globs[, options]) gulp.dest(path[, options]) gulp.watch(glob [, opts], tagulpsks)
看不懂没关系,我们先快速上手着几个api再一个个分析接着在gulpfile.js中写入下列几行代码
gulp.task('min-css',function(){ //1 gulp.src('./src/css/*.css') //2 .pipe(gulp_concat("index.min.css"))//3 .pipe(minify_css())//4.混淆即压缩 .pipe(gulp.dest('./dist/css'));//5.输出路径 });
//1. gulp.task('min-css',function(){ }
这个API用来创建任务,在命令行下可以输入$ gulp min-css来执行上面的任务。gulp.task(name[, deps], fn),第一个参数name
是自定义你的任务名称,第二个参数[deps]是一个数组
,里面是你定义的其他任务的名称,这些任务会在本次定义的任务之前执行并完成
。第三个参数fn
是本次任务的回调函数。
举个栗子:
gulp.task('task1',function(){ console.log("task1 done"); }); gulp.task('task2',function(){ console.log("task2 done"); }); gulp.task('task3',function(){ console.log("task3 done"); }); gulp.task('build',['task1','task2','task3'],function(){ console.log("build done"); });
下图是执行build任务的结果,用gulp build
现在应该很清除这3个参数的作用了吧
//pipe(),管道函数,及
//2.gulp.src('./src/css/*.css')
这个API获得要处理的文件源路径 官方API gulp.src(globs[, options])
globs
是一个匹配模式,如gulpfile.js中写的 gulp.src('./src/css/*.css')
'./src/css/*.css'
匹配同层路径下src目录下的css目录下的所有以.css结尾的文件
更多的匹配模式可以参考官方文档。globs类型
:String 或者 Array。string则说明它匹配单一模式。array表示它可以传入数组多个匹配字段,如['./src/css/index.css','./src/css/pomelo.css'][options]
是可选的。主要是两个,options.base----匹配的根目录,options-read
举个栗子:哈哈,这个得等学会gulp.dest()
这个API后才能具体说明。
//3 .pipe(gulp_concat("index.min.css"))
pipe()
方法是正如字面意思理解的那样,把一个文件流输入,通过pipe管道输出,
下一个处理程序可以把上一级输出的流文件当做输入
这样可以实现文件流的高效处理,我认为这种方法很像jquery的写法。能够进行链式调用处理。
那么毫无疑问,第三段的代码.pipe(gulp_concat("index.min.css"))//3
的意思就是把获取到匹配gulp.src()
字段的文件通过pipe
管道进入插件gulp_concat()
的处理程序,并且合并后的文件名为index.min.css
这里插件gulp_concat
是文件合并的插件,详细的使用方法请在gitbub或者npm网站中找到相关的api文档。
//4 .pipe(minify_css())//混淆压缩js插件
方法和第三步是一样的
//5 .pipe(gulp.dest('./dist/css'));
官方API gulp.dest(path[, options])
第一个参数 path:String 或者 Functionstring类型
--------输出文件的目标路径(或目录)'./dist/css'
function
--------将接收一个 vinyl 文件实例 作为参数(具体请看分析“Gulp思维——Gulp高级技巧”)
第二个参数options有两个属性options.cwd
和 options.mode
options.cwd
用于计算输出目录的,只有提供的输出目录是相对路径时此参数才有用。options.mode
用于创建的输出目录指定权限。默认值为077
前面提到过。想使用gulp.src的一些属性参数得先学会gulp.dest().这是因为源的参数设定(即输入端)会影响输出端的。
gulp.dest()的作用是将 目的地址(gulp.dest()
)的基础路径(base)替换成
源地址(gulp.src()
)的基础路径(base)输出
那么什么是基础路径base
呢?gulp.src('./src/css/*.css')
中有第二个参数base,可以指定基础路径,如果不设置,则默认基础路径为 * 之前的路径
。
base:'./src/css'
如果设置了 gulp.src('./src/css/*.css',{base:'./'})
则base------'./'gulp.dest('./dist/css')
传入的参数就是base路径
base:'./dist/css'
举个栗子来解释什么是替换
gulp.src('./src/css/*.css').pipe().pipe(gulp.dest('./dist/css'));
那么最后文件处理完成的最终路径是
./dist/css/*.css
如果是
gulp.src('./src/css/*.css',{base:'./'}).pipe().pipe(gulp.dest('./dist/css'));
那么最后文件处理完成的最终路径是
./dist/css/src/css/*.css
综上所述:
快速入门gulp就算结束了。我们已经学会如何装gulp,如何安装gulp插件
,如何写package.json
文件。如何写gulpfile.js
配置文件
了解了gulp的3大APIgulp.src()
;gulp.task()
;gulp.dest()
实现的功能
:完成了对多个css文件的合并与压缩并且输入到目标文件夹下
最后再次献上gulp官方网站,想学习更多就得自己修炼了。 ^0^