关于gulp的知识总结

最新推荐文章于 2019-03-11 17:01:00 发布

「已注销」

最新推荐文章于 2019-03-11 17:01:00 发布

阅读量932

点赞数

分类专栏：其他文章标签：前端开发 nodejs gulp

本文链接：https://blog.csdn.net/duola8789/article/details/53709645

版权

其他专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1、简介

gulp是前端开发过程中对代码进行是自动化构建的工具，不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成。

gulp是基于Nodejs的自动任务运行器，她能自动化地完成javascript/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。

在学习前，先谈谈大致使用gulp的步骤，给读者以初步的认识。首先当然是安装nodejs，通过nodejs的npm全局安装和项目安装gulp，其次在项目里安装所需要的gulp插件，然后新建gulp的配置文件gulpfile.js并写好配置信息（定义gulp任务），最后通过命令提示符运行gulp任务即可。

安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务

2、安装

2.1 安装nodejs

gulp是基于nodejs，理所当然需要安装nodejs

2.2 使用命令行

简单介绍gulp在使用过程中常用命令，打开命令提示符执行下列命令（打开方式：window + r 输入cmd回车）：

node -v 查看安装的nodejs版本，出现版本号，说明刚刚已正确安装nodejs。PS：未能出现版本号，请尝试注销电脑重试；
npm -v 查看npm的版本号，npm是在安装nodejs时一同安装的nodejs包管理器，那它有什么用呢？稍后解释；
cd 定位到目录，用法：cd + 路径；
dir 列出文件列表；
cls清空命令提示符窗口内容。
Ctrl+c退出任务，但不退出这个目录

使用命令行

2.3 npm介绍

看来是不能够离线安装gulp，必须通过npm来安装

2.3.1、说明：npm（node package manager）nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）

2.3.2、使用npm安装插件：命令提示符执行：

npm install <name> [-g] [--save-dev]；

① ：node插件名称。例：

npm install gulp-less --save-dev

② -g：全局安装。将会安装在C:\Users\Administrator\AppData\Roaming\npm，并且写入系统环境变量；非全局安装：将会安装在当前定位目录；

全局安装可以通过命令行在任何地方调用它，本地安装将安装在定位目录的node_modules文件夹下，通过require()调用；
③ –save：将保存配置信息至package.json（package.json是nodejs项目配置文件）；

④ -dev：保存至package.json的devDependencies节点，不指定-dev将保存至dependencies节点；一般保存在dependencies的像这些express/ejs/body-parser等等。

⑤、为什么要保存至package.json？因为node插件包相对来说非常庞大，将配置信息写入package.json并将更新 devDependencies 值，以表明项目需要依赖gulp，Dependencies的值可以向其他参与项目的人指明项目在开发环境和生产环境中的node模块依懒关，其他开发者对应下载即可（命令提示符执行npm install，则会根据 package.json 下载所有需要的包，npm install –production只下载dependencies节点的包）。

2.3.3、使用npm卸载插件：

npm uninstall <name> [-g] [--save-dev]

PS：不要直接删除本地插件包

① 删除指定插件：

npm uninstall gulp-less gulp-uglify gulp-concat

① 删除全部插件：借助rimraf：

npm install rimraf -g
rimraf node_modules

2.3.4、使用npm更新插件：

npm update <name> [-g] [--save-dev]//更新指定插件
npm update [--save-dev]//更新全部插件

2.3.5、查看npm帮助：

npm help

2.3.6、当前目录已安装插件；

npm list

2.4 选装cnpm

2.4.1、说明：因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，所以淘宝团队干了这事。来自官网

这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟一次以保证尽量与官方服务同步。

2.4.2、官方网址：http://npm.taobao.org；

2.4.3、安装：命令提示符执行；

npm install cnpm -g --registry=https://registry.npm.taobao.org

注意：安装完后最好查看其版本号cnpm-v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误；cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm；

2.5 全局安装gulp

2.5.1、说明：全局安装gulp目的是为了通过她执行gulp任务；

2.5.2、安装：命令提示符执行；

cnpm install gulp -g；

2.5.3、查看是否正确安装：命令提示符执行gulp -v，出现版本号即为正确安装。

2.6 新建package.json文件

2.6.1、说明：package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件

2.6.2、它是这样一个json文件（注意：json文件内是不能写注释的，复制下列内容请删除注释）：

这里写图片描述

2.6.3、可以使用更为效率的方法，命令提示符执行：

cnpm init

填入下列信息：

这里写图片描述

特别注意：package.json是一个普通json文件，所以不能添加任何注释

2.7 本地安装gulp及插件

2.7.1、本地安本地安装gulp：

cnpm install gulp --save-dev

2.7.2、安装指定插件，以以gulp-less为例（编译less文件），命令提示符执行：

cnpm install --save-dev //安装所有插件
cnpm install gulp-less --save-dev

PS：全局安装了gulp，项目本地也安装了gulp，全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能。

2.8 新建gulpfile.js文件（重要！！！）

2.8.1、说明：gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件，需要新建gulpfile文件以指定gulp需要为我们完成什么任务。

2.8.2、我的gulpfile.js执行的任务包括①检查JS语法，编译less文件，压缩css文件，合并、压缩、重命名JS文件，自动刷新页面，具体的内容如下：

//导入工具包 require('node_modules里对应模块')
//引入 gulp
var gulp = require('gulp'),
// 引入组件
    jshint = require('gulp-jshint'),// 任务：检查Javascript脚本
    less = require('gulp-less'),// 任务：编译less文件
    //concat = require('gulp-concat'),// 任务：合并Javascript
    uglify = require('gulp-uglify'),// 任务：压缩合并后的Javascript
    rename = require('gulp-rename'),// 任务：重命名合并后的Javascript
    liveReload=require('gulp-livereload'),// 任务：自动刷新页面
    cleanCss=require('gulp-clean-css'),// 任务：压缩CSS文件
    notify = require('gulp-notify'),// 任务：出现异常并不终止watch事件
    plumber = require('gulp-plumber');// 任务：提示错误
//定义一个检查脚本任务lint（自定义任务名称）
gulp.task('lint', function() {
    gulp.src('source/**/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));//脚本语法检查使用reporter报告错误信息
});
//将less文件编译css文件，并且实时刷新页面
gulp.task('less', function () {
    gulp.src('source/styles/less/*.less')
        .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))// 提示错误
        .pipe(less())
        .pipe(gulp.dest('source/styles/css'))
        .pipe(liveReload())
});
//压缩由less得到的CSS文件
gulp.task('cleanCss',function(){
    gulp.src('source/styles/css/*.css')
        .pipe(cleanCss())
        .pipe(rename({ suffix: '.min' }))//后缀增加min,每个文件重命名自动确定
        .pipe(gulp.dest('dist/styles/css'))
});
//合并，压缩、重命名js文件
gulp.task('scripts', function() {
    gulp.src(['source/scripts/*.js','!source/scripts/*.min.js'])//数组后一项是为了防止同一文件夹下的重复压缩
        .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))// 提示错误
        //.pipe(concat('all.js'))
        //.pipe(gulp.dest('source/scripts'))
        .pipe(rename({ suffix: '.min' }))//rename应该在dest之前
        .pipe(uglify())
        .pipe(gulp.dest('dist/scripts'));
});
//监听任务，并且调用listen方法实现实时刷新页面
//监听事件需要保证命令提示符处于打开状态，关闭后监听事件结束
gulp.task('watching',function(){
    liveReload.listen();//调用listen方法
    gulp.watch(['source/**/*.*'],['lint','less','cleanCss','scripts']);

 });
// 默认任务
gulp.task('default', ['lint','less','cleanCss','scripts','watching']);

3、运行

3.1 说明：使用命令提示符执行任务名称；

3.2 执行各任务，在命令提示符中输入：

gulp default//执行所有任务
gulp scripts//编译合并、压缩、重命名js文件任务

3.3 当执行gulp default或gulp会调用default，执行所有任务；

4、gulp API

4.1 gulp.src()

4.1.1、说明：

gulp的工作方式使用了Node.js的stream，首先获取到需要的stream，然后通过stream的.pipe()方法把流导入到你想要的地方。比如gulp的插件中，经过插件处理后的流又可以继续流到其他插件中。所以gulp以流为媒介，速度比grunt块。gulp.src()方法的目的就是获取流。

4.1.2、语法：

Gulp.src(globs[,options])

globs参数是文件匹配模式（类似正则表达式），用来匹配文件路径和文件名，也可以指定某个具体的文件路径。有多个匹配模式时，此参数是一个数组。

options为可选参数，一般用不到。

4.1.3、glob匹配规则：

gulp内部使用了node-glob模块实现文件匹配功能，其中特殊的匹配字符有：
- *匹配文件路径中的0个或多个字符，但不匹配路径分隔符（除非分割符在末尾）；
- * 匹配路径中的0个或多个目录及子目录，需单独出现（即它左右不能有其他东西），例如* b可以匹配aab，ab，aaaaab，但是不能匹配a/b；
- ?匹配文件路径中的一个字符；
- […]匹配方括号中出现的字符中的任意一个；
- [^…]和[!…]不匹配方括号中出现的字符中的任意一个；
- !(pattern1|pattern2|pattern3)与模式中的任意一个都不匹配，?表示与模式匹配1次或0次，+表示1次或多次，*表示0次或多次，@表示匹配1此

看例子：

这里写图片描述

有多种匹配模式时可以使用数组：

//使用数组匹配多个地址
Gulp.src(['js/*.js', 'js1/*.js', 'js2/*.js'])

在数组中的单个匹配模式之前可以使用排除模式，但是注意排除模式不能很出现在数组第一项：

gulp.src(['*.js', '！b*.js']) //匹配除b开头的js文件之外的所有js文件

可以使用展开模式{}，根据大括号里面的内容进行重复展开，最终结果为所有展开后相加的结果，例子：

这里写图片描述

4.2 gulp.dest()

4.2.1、说明：gulp.dest()方法是用来指定写入文件的地址的；

4.2.2、语法：

gulp.dest(pate[,options])

4.2.3、生成路径：

首先要理解.dest()传入的path路径参数与最终生成的文件的关系。gulp的使用流程一般是：首先通过gulp.src()方法获取到想要处理的文件流，然后把文件流通过pipe方法导入到gulp的插件中，插件处理后的流再通过pipe方法导入到gulp.dest()中，gulp.dest()方法则把流中的内容写入到文件中。

其中给gulp.dest()传入的路径参数，只能用来指定要生成的文件的目录，不能指定生成文件的文件名，它生成的文件名是导入到流中的文件自身的文件名，即使传给.dest()一个带有文件名的路径参数，也会把文件名当成是目录名，例如：

var gulp= require('gulp');
gulp.src('script/jquery.js')
    .pipe(gulp.dest('dist/foo.js'));
//最终生成的文件路径为dist/foo.js/jquery.js

更改文件名使用gulp-rename插件；

4.2.4、路径与src参数的关系：

①gulp.src(glob)的globs中有通配符时：.dest(path)中生成文件的路径是传入path的参数后面再加上gulp.src(glob)中有通配符开始算起的那部分路径。例如：

var gulp= require('gulp');
gulp.src('**/*.js')//有通配符开始出现的路径为**/*.js,假设匹配到的文件是a/b/c.js
    .pipe(gulp.dest('dist/'));
//最终生成的文件路径为dist/a/b/c.js
gulp.src('scripts/**/*.js') //假设匹配到的文件是scripts/a/c.js
    .pipe(gulp.dest('dist/'));
//最终生成的文件路径为dist/a/c.js

②gulp.src(globs)的globs中没有通配符时：.dest(path)中生成文件的路径是传入path的参数直接加上gulp.src(globs)中匹配的文件名。例如：

var gulp= require('gulp');
gulp.src('a/b/c.js')//匹配到的文件时a/b/c.js
    .pipe(gulp.dest('dist/'));
//最终生成的文件路径为dist/c.js

③gulp.src(globs)中的options中格的base属性默认是src中出现通配符之前的那部分路径，.dest(path)的路径就是使用path替换掉src路径中的bath部分，所以通过设置gulp.src(globs)中的options中格的base属性，可以更灵活的更改gulp.dest()生成的文件路径：

var gulp= require('gulp');
gulp.src('app/src/**/*.js')//匹配到的文件app/src/a/b.js, base值是app/src/
    .pipe(gulp.dest('dist/'));
//没有配置base值，最终生成的文件路径为dist/a/b.js
gulp.src('app/src/**/*.js',{base:'app'})//匹配到的文件app/src/a/b.js, base值是app/
    .pipe(gulp.dest('dist/'));
//没有配置base值，最终生成的文件路径为dist/src/a/b.js

4.3 gulp.task()

4.3.1、说明：gulp.task()方法是用来定义任务系；

4.3.2、语法：

gulp.task(name[,deps][,fn])

name是任务名；

deps是当前任务需要依赖的其他任务，是一个数组，当前定义的任务会在所有依赖任务执行完毕之后才开始执行；

fn为回调函数，把任务要执行的代码写在里面；

gulp.task("myTask",["myTask1","myTask2"],function(){
//定义要执行的代码
});

4.3.3、执行顺序：

要执行one，two，three三个任务，可以定义一个空任务default，然后将这三个任务当做default的以来任务添加进去:

gulp.task("default",["one","two","three"]);
//只要执行default就相当于执行了三个任务

如果任务相互间没有依赖，任务会按照书写顺序执行，如果有依赖会先执行依赖的任务；

4.4 gulp.watch()

4.4.1、说明：gulp.watch()方法是用来监视文件变化，当文件变化后，利用它来执行相应的任务，如文件压缩、编译等；

4.4.2、语法：

gulp.watch(glob,[,opts],tasks)

glop是要监视的文件匹配模式，与gulp.src()方法中的glob相同；

opts是可选的配置对象；

tasks是文件变化后要执行的任务，是一个数组；

gulp.task("uglyMe",function(){
    //do something
});
gulp.task("beautifulYou",function(){
    //do something
});
gulp.task("watching",function(){
    gulp.watch("js/**/*.js",["uglyMe","beautifulYou"]);
});
gulp.task("default",["uglyMe","beautifulYou",watching]);

注意，监听事件需要保证命令提示符处于打开状态，关闭后监听事件结束；

使用Ctrl+c可以退出当前任务；

4.4.3、异常处理：

当编译less或者js语法检查时出现语法错误或者其他异常，会终止watch事件，通常需要查看命令提示符窗口才能知道，这并不是我们所希望的，所以我们需要处理出现异常并不终止watch事件（gulp-plumber），并提示我们出现了错误（gulp-notify）。

var gulp = require('gulp'),
// 引入组件
    less = require('gulp-less'),// 任务：编译less文件
    notify = require('gulp-notify'),// 任务：出现异常并不终止watch事件
    plumber = require('gulp-plumber');// 任务：提示错误
//将less文件编译css文件，并且实时刷新页面
gulp.task('less', function () {
    gulp.src('source/styles/less/*.less')
        .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))// 提示错误
        .pipe(less())
        .pipe(gulp.dest('source/styles/css'))
        .pipe(liveReload())
});

5、常用的gulp插件

less的编译(gulp-less)
sass的编译(gulp-sass)
重命名(gulp-rename)，在gulp.dest()之前更改文件流中的文件的文件名，更改最终输出的文件的文件名
压缩css(gulp-clean-css)
Js代码校验(gulp-jshint)
合并文件(gulp-concat)，把多个文件合并为一个文件，可以合并js或css文件，能减少页面的http请求数
压缩js文件，用的是uglify引擎
自动刷新页面(gulp-livereload，谷歌和firefox浏览器需安装livereload插件)
html文件压缩（gulp-minify-html）
source-maps插件（gulp-source-maps）
自动加载插件（gulp-load-plugins），在gulpfile.js文件中引入（require）gulp-load-plugins后，会针对package.json中写入的依赖关系，在使用到其中某个插件时自动加载插件。使用方法plugins.rename，plugins.rubySass（转换为驼峰式），可以替代gulpfile.js中开头引入插件的过程；

var gulp=require('gulp');
//加载gulp-load-plugins插件并立即运行
plugins=require('gulp-load-plugins')();
plguins.rename//使用rename插件

压缩图片(gulp-imagemin)

var gulp=require('gulp'), 
    imagemin=require('gulp- magemin'), 
    pngquant=require('imagemin-pngquant');//png图片压缩插件
gulp.task('minifyImage',function(){
    return gulp.src('images/*.png')
        .pipe(imagemin({
            progressive:"", 
            use:[pngquant()]//使用pngquant插件压缩png图片
            }))
        .pipe(gulp.dest('dist'))
 });
 //相对复杂，去http://github.com/sindresorhus/gulp-imagemin查看更多信息；

7、使用webstorm可视化执行gulp任务

项目导入webstorm，右键点击gulpfile.js，选择”Show Gulp Tasks”打开gulp窗口，若出现”Task not found”，选择右键”Reload Tasks”，双击运行

这里写图片描述

8、文件组织小技巧

建立文件夹时，src为源代码，dist为压缩后上线使用代码，将hmtl放到src和dist之外的单独文件夹，假设为html，引用源码的css时

    <link type="text/css" rel="stylesheet" href="../sourece/styles/css/index.min.css">

引用上线代码的css时

    <link type="text/css" rel="stylesheet" href="../dist/styles/css/index.min.css">

这里写图片描述

9、出处

花了一周的时间，总结的详细一点，符合自己理解知识的逻辑，等到重新使用的时候会省一点时间

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

关于gulp的知识总结

1、简介

2、安装

2.1 安装nodejs

2.2 使用命令行

2.3 npm介绍

2.3.1、 说明：npm（node package manager）nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）

2.3.2、使用npm安装插件：命令提示符执行：

2.3.3、使用npm卸载插件：

2.3.4、使用npm更新插件：

2.3.5、查看npm帮助：

2.3.6、当前目录已安装插件；

2.4 选装cnpm

2.4.1、说明：因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，所以淘宝团队干了这事。来自官网

2.4.2、官方网址：http://npm.taobao.org；

2.4.3、安装：命令提示符执行；

2.5 全局安装gulp

2.5.1、说明：全局安装gulp目的是为了通过她执行gulp任务；

2.5.2、安装：命令提示符执行；

2.5.3、查看是否正确安装：命令提示符执行gulp -v，出现版本号即为正确安装。

2.6 新建package.json文件

2.6.1、说明：package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件

2.6.2、它是这样一个json文件（注意：json文件内是不能写注释的，复制下列内容请删除注释）：

2.6.3、可以使用更为效率的方法，命令提示符执行：

2.7 本地安装gulp及插件

2.7.1、本地安本地安装gulp：

2.7.2、安装指定插件，以以gulp-less为例（编译less文件），命令提示符执行：

2.8 新建gulpfile.js文件（重要！！！）

2.8.1、说明：gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件，需要新建gulpfile文件以指定gulp需要为我们完成什么任务。

2.8.2、我的gulpfile.js执行的任务包括①检查JS语法，编译less文件，压缩css文件，合并、压缩、重命名JS文件，自动刷新页面，具体的内容如下：

3、运行

3.1 说明：使用命令提示符执行任务名称；

3.2 执行各任务，在命令提示符中输入：

3.3 当执行gulp default或gulp会调用default，执行所有任务；

4、gulp API

4.1 gulp.src()

4.1.1、说明：

4.1.2、语法：

4.1.3、glob匹配规则：

4.2 gulp.dest()

4.2.1、说明：gulp.dest()方法是用来指定写入文件的地址的；

4.2.2、语法：

4.2.3、生成路径：

4.2.4、路径与src参数的关系：

4.3 gulp.task()

4.3.1、说明：gulp.task()方法是用来定义任务系；

4.3.2、语法：

4.3.3、执行顺序：

4.4 gulp.watch()

4.4.1、说明：gulp.watch()方法是用来监视文件变化，当文件变化后，利用它来执行相应的任务，如文件压缩、编译等；

4.4.2、语法：

4.4.3、异常处理：

5、常用的gulp插件

7、使用webstorm可视化执行gulp任务

8、文件组织小技巧

9、出处

2.3.1、说明：npm（node package manager）nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）