gulp 学习笔记
Posted HeSh
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了gulp 学习笔记相关的知识,希望对你有一定的参考价值。
关于学习gulp,推荐大家看前端构建工具gulpjs的使用介绍及技巧,这篇文章作为入门学习资料还是不错的。
gulp的安装
gulp是基于nodejs开发的,所以首先确定安装了nodejs。
(1)全局安装gulp
npm install -g gulp
(2)针对项目局部安装gulp
npm install gulp
(3)在项目目录下安装gulp依赖包
npm install --save-dev gulp
或者在项目目录下安装package.json中配置的所有依赖,可以手动添加package.json文件
npm install
{ "name": "gulp", "version": "1.0.0", "description": "This is a little exercise on gulp", "main": "gulpfile.js", "dependencies": { "gulp": "^3.9.1", "gulp-uglify": "^2.0.0", "gulp-concat": "^2.6.1", "gulp-minify-html":"^1.0.6", "gulp-minify-css":"^1.2.4" },"scripts": { "test": "echo \\"Error: no test specified\\" && exit 1" }, "author": "heshuaishuai", "license": "ISC" }
gulp的使用
(1)首先在项目的根目录下创建一个gulpfile.js文件
/**
* Created by heshuaishuai on 2016/12/5.
*/
var gulp = require(\'gulp\'),//加载gulp模块
uglify = require(\'gulp-uglify\'),//加载压缩js模块
concat = require(\'gulp-concat\'),//加载合并模块
htmlmin = require(\'gulp-minify-html\'),//加载压缩html模块
cssmin = require(\'gulp-minify-css\');//加载压缩css模块
//输出hello
gulp.task(\'hello\',function () {
console.log(\'hello\');
});
//压缩js
gulp.task(\'minify-js\',function () {
gulp.src(\'js/*.js\')
.pipe(uglify())
.pipe(gulp.dest(\'dest/js\'));
});
//合并js
gulp.task(\'concat-js\',function () {
gulp.src(\'dest/js/*.js\')
.pipe(concat(\'all.js\'))
.pipe(gulp.dest(\'dest/js\'));
});
//压缩html
gulp.task(\'minify-html\',function () {
gulp.src(\'index.html\')
.pipe(htmlmin())
.pipe(gulp.dest(\'dest/html\'));
});
//压缩css
gulp.task(\'minify-css\',function () {
gulp.src(\'css/*.css\')
.pipe(cssmin())
.pipe(gulp.dest(\'dest/css\'));
});
gulp.task(\'default\',[\'hello\',\'minify-js\',\'concat-js\',\'minify-html\',\'minify-css\']);
require()函数用于加载依赖模块,
gulp.task("default",[])为默认任务,当在命令行数据gulp命令时,default后面数组中的任务将被自动执行。
(2)运行gulp
gulp
gulp的API
gulp的API主要的有gulp.task、gulp.src、gulp.dest、gulp.watch;
(1)gulp.src
gulp.src方法正是用来获取流的,但要注意这个流里的内容不是原始的文件流,而是一个虚拟文件对象流(Vinyl files),这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息。其语法为:
gulp.src(globs[, options])
globs参数是文件匹配模式(类似正则表达式),用来匹配文件路径(包括文件名),当然这里也可以直接指定某个具体的文件路径。当有多个匹配模式时,该参数可以为一个数组。
options为可选参数。
下面我们重点说说Gulp用到的glob的匹配规则以及一些文件匹配技巧。
Gulp内部使用了node-glob模块来实现其文件匹配功能。我们可以使用下面这些特殊的字符来匹配我们想要的文件:
*
匹配文件路径中的0个或多个字符,但不会匹配路径分隔符,除非路径分隔符出现在末尾**
匹配路径中的0个或多个目录及其子目录,需要单独出现,即它左右不能有其他东西了。如果出现在末尾,也能匹配文件。?
匹配文件路径中的一个字符(不会匹配路径分隔符)[...]
匹配方括号中出现的字符中的任意一个,当方括号中第一个字符为^
或!
时,则表示不匹配方括号中出现的其他字符中的任意一个,类似js正则表达式中的用法!(pattern|pattern|pattern)
匹配任何与括号中给定的任一模式都不匹配的?(pattern|pattern|pattern)
匹配括号中给定的任一模式0次或1次,类似于js正则中的(pattern|pattern|pattern)?+(pattern|pattern|pattern)
匹配括号中给定的任一模式至少1次,类似于js正则中的(pattern|pattern|pattern)+*(pattern|pattern|pattern)
匹配括号中给定的任一模式0次或多次,类似于js正则中的(pattern|pattern|pattern)*@(pattern|pattern|pattern)
匹配括号中给定的任一模式1次,类似于js正则中的(pattern|pattern|pattern)
下面以一系列例子来加深理解
*
能匹配a.js
,x.y
,abc
,abc/
,但不能匹配a/b.js
*.*
能匹配a.js
,style.css
,a.b
,x.y
*/*/*.js
能匹配a/b/c.js
,x/y/z.js
,不能匹配a/b.js
,a/b/c/d.js
**
能匹配abc
,a/b.js
,a/b/c.js
,x/y/z
,x/y/z/a.b
,能用来匹配所有的目录和文件**/*.js
能匹配foo.js
,a/foo.js
,a/b/foo.js
,a/b/c/foo.js
a/**/z
能匹配a/z
,a/b/z
,a/b/c/z
,a/d/g/h/j/k/z
a/**b/z
能匹配a/b/z
,a/sb/z
,但不能匹配a/x/sb/z
,因为只有单**
单独出现才能匹配多级目录?.js
能匹配a.js
,b.js
,c.js
a??
能匹配a.b
,abc
,但不能匹配ab/
,因为它不会匹配路径分隔符[xyz].js
只能匹配x.js
,y.js
,z.js
,不会匹配xy.js
,xyz.js
等,整个中括号只代表一个字符[^xyz].js
能匹配a.js
,b.js
,c.js
等,不能匹配x.js
,y.js
,z.js
当有多种匹配模式时可以使用数组
gulp.src([\'js/*.js\',\'css/*.css\',\'*.html\']);
(2)gulp.dest
gulp.dest()方法是用来写文件的,其语法为:
gulp.dest(path[,options])
path为写入文件的路径
options为一个可选的参数对象。
gulp的使用流程一般是这样子的:首先通过gulp.src()
方法获取到我们想要处理的文件流,然后把文件流通过pipe方法导入到gulp的插件中,最后把经过插件处理后的流再通过pipe方法导入到gulp.dest()
中,gulp.dest()
方法则把流中的内容写入到文件中,这里首先需要弄清楚的一点是,我们给gulp.dest()
传入的路径参数,只能用来指定要生成的文件的目录,而不能指定生成文件的文件名,它生成文件的文件名使用的是导入到它的文件流自身的文件名,所以生成的文件名是由导入到它的文件流决定的。
gulp.task(\'minify-js\',function () {
gulp.src(\'js/*.js\')
.pipe(uglify())
.pipe(gulp.dest(\'dest/js\'));
});
(3)gulp.task
gulp.task方法用来定义任务,其语法为:
gulp.task(name[, deps], fn)
name 为任务名
deps 是当前定义的任务需要依赖的其他任务,为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖,则可省略这个参数
fn 为任务函数,我们把任务要执行的代码都写在里面。该参数也是可选的。
gulp.task(\'default\',[\'hello\',\'minify-js\',\'concat-js\',\'minify-html\',\'minify-css\'],function(){
});
(4)gulp.watch
gulp.watch方法用来监视文件的变化,当文件发生变化后,我们可以利用它来执行相应的任务,例如文件压缩等。其语法为
gulp.watch(glob[, opts], tasks)
glob 为要监视的文件匹配模式,规则和用法与gulp.src()
方法中的glob
相同。
opts 为一个可选的配置对象,通常不需要用到
tasks 为文件变化后要执行的任务,为一个数组
//监听事件
gulp.task(\'watch\',function () {
//当js文件夹下的js发生变化,就执行压缩命令
gulp.watch(\'js/*.js\',[\'minifyJs\']);
});
gulp插件
在输入命令时添加--save-dev让package.json自动生成依赖
"devDependencies": { "gulp": "^3.9.1", "gulp-concat": "^2.6.1", "gulp-load-plugins": "^1.4.0", "gulp-minify-css": "^1.2.4", "gulp-minify-html": "^1.0.6", "gulp-rev": "^7.1.2", "gulp-rev-collector": "^1.0.5", "gulp-uglify": "^2.0.0" },
(1)压缩js
npm install --save-dev gulp-uglify
gulp.task(\'minify-js\',function () { gulp.src(\'js/*.js\') .pipe(uglify()) .pipe(gulp.dest(\'dest/js\')); });
(2)合并js
npm install --save-dev gulp-concat
gulp.task(\'concat-js\',function () { gulp.src(\'dest/js/*.js\') .pipe(concat(\'all.js\')) .pipe(gulp.dest(\'dest/js\')); });
(3)压缩css
npm install --save-dev gulp-minify-css
gulp.task(\'minify-css\',function () { gulp.src(\'css/*.css\') .pipe(cssmin()) .pipe(gulp.dest(\'dest/css\')); });
(4)文件指纹,以js为例
npm install --save-dev gulp-rev gulp-rev-collector
var gulp = require(\'gulp\'),
plugins = require(\'gulp-load-plugins\')();
//压缩合并js,生成文件指纹 gulp.task(\'minifyJs\',function(){ return gulp.src(\'js/*.js\') .pipe(plugins.concat(\'main.min.js\')) .pipe(plugins.uglify()) .pipe(plugins.rev())//为main.min.js随机添加10位hash值 .pipe(gulp.dest(\'dest/minJs\')) .pipe(plugins.rev.manifest())//生成与文件对应的键值对 .pipe(gulp.dest(\'rev/json\')) }); //替换引入的文件 gulp.task(\'htmlRouter\',function () { return gulp.src([\'rev/**/*.json\',\'index.html\']) .pipe(plugins.revCollector())//替换引入的文件,将改完名的文件引入 .pipe(gulp.dest(\'./\')) }); //监听事件 gulp.task(\'watch\',function () { //当js文件夹下的js发生变化,就执行压缩命令 gulp.watch(\'js/*.js\',[\'minifyJs\']); }); gulp.task(\'default\',[\'minifyJs\',\'watch\',\'htmlRouter\']);
关于文件指纹,推荐Gulp--文件压缩和文件指纹,这篇文章不错。
结束语
以上主要讲解了gulp的安装,主要的API及一些简单的插件使用。有什么不懂或者有错误可以给我留言!
以上是关于gulp 学习笔记的主要内容,如果未能解决你的问题,请参考以下文章