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 学习笔记的主要内容,如果未能解决你的问题,请参考以下文章

gulp学习笔记1 uglify

gulp 学习笔记

gulp 学习笔记2 named tasks

Node.js学习笔记使用Gulp项目自动化构建工具

Gulp 学习笔记

gulp学习笔记