gulp

什么是gulp？

Gulp 是一个自动化工具，前端开发者可以使用它来处理常见任务：
搭建web服务器
文件保存时自动重载浏览器
使用预处理器如Sass、LESS
优化资源，比如压缩CSS、JavaScript、压缩图片

gulp的安装：

npm初始化，新建package.json
npm init -y
先安装全局
npm install gulp -g
再需要在当前项目中安装
npm install gulp
装两遍是为了版本的灵活性

开始使用gulp

在根目录下新建gulpfile.js文件
这个文件就是配置运行文件。我们先尝试写一个最简单的内容
- ```
var gulp=require("gulp");
gulp.task("init",function () {console.log("init");
});
```
- 1、require就是讲刚才下载的gulp模块加载导入进来
- 2、gulp下有一个方法task用来定义任务，第一个参数是任务名，第二个参数是任务执行后的执行函数
- 3、在命令行输入gulp init这个init就是刚才起的任务名，执行后就会执行函数，打印出init

gulp的方法

gulp的工作方式

gulp实际工作是使用nodejs中的stream来处理的，简单来说，如果需要合并两个文件，就需要讲两个文件都加载进来，然后再处理将文件合并，注意这里加载进来的文件并不是文本形式加载，而是以二进制数据流的方式，也就是steam加载进入。被加载进入的文件是以二进制数据流模式存在的，内容中除了含有文件内容，还包括了文件的地址，文件名等等一系列相关信息。然后再将所有的数据流处理生产新文件。因此这里就用到了nodejs中stream的方法pipe

pipe
管道，流向的意思，可以在这里理解为写入到
a.pipe(b) 将a写入到b中

src方法

读取文件的数据流
gulp.src(globs)
globs参数是读取文件的筛选条件，可以写入字符串，也可以是数组，数组含有多个读取条件
gulp.src(“js/a.js”) 读取一个文件
gulp.src([“js/a.js”,“js/b.js”]) 读取两个文件
gulp.src(“js/*.js”) js文件夹下所有的js文件
匹配条件

匹配文件路径中的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)

dest方法

给文件写入数据流
gulp.dest(path)
path参数是要写入文件存放的路径

gulp.task("init",function () {gulp.src("./js/*.js").pipe(gulp.dest("./dist/"))
});

这样就会将当前目录下，js文件夹下所有的js读入，然后写入到当前目录的dist文件夹下
用gulp.dest()把文件流写入文件后，文件流仍然可以继续使用。

task方法

定义任务
如果需要有多个任务操作时就需要定义任务
gulp.task(任务名,任务所依赖前面任务名的数组,任务执行的函数);

gulp.task("default",function () {console.log("aaa");
});

这是默认执行，执行gulp就可以，无需输入任务名

gulp.task("one",function () {console.log("one");
});
gulp.task("two",["one"],function () {console.log("two")
});

如果执行 gulp two 这时候就会先执行任务one，再执行任务two

watch方法

监视文件变化
gulp.watch(“监视的文件”,[监视文件发生变化后需要执行任务名的数组])

gulp.task("default",function () {gulp.watch('js/*.js', function(event){console.log(event.type); //变化类型 added为新增,deleted为删除，changed为改变console.log(event.path); //变化的文件的路径});
});

这里启动任务后，会开始监视，如果js文件夹下那个文件修改了，或者删除，增加，这里都会打印出来

gulp4

在gulp4中所有的前置任务都被修改了，例如task中的数组不再使用，改为series和parallel

series

前置任务完成后，执行下一个任务，同步执行

回调函数法：

gulp.task("js",function(done){gulp.src("./src/**/*.js").pipe(load.babel({"presets": ["@babel/env"]})).pipe(gulp.dest("./dist"))done();
})
gulp.task("save",gulp.series("js",function(){console.log("aaaa")gulp.src("./dist/**/*.js").pipe(load.concat("main.min.js")).pipe(load.uglify()).pipe(gulp.dest("./dist"));
}));

注意上面的done，在函数中有参数done，当完成当前任务内容后执行回调函数done，以为这后续任务save中的function函数被执行，会打印aaaa，如果不执行done，不会执行后续任务

promise法

gulp.task("js",function(){return new Promise(function(res,rej){gulp.src("./src/**/*.js").pipe(load.babel({"presets": ["@babel/env"]})).pipe(gulp.dest("./dist"));res();})
})
gulp.task("save",gulp.series("js",function(){console.log("aaaa")gulp.src("./dist/**/*.js").pipe(load.concat("main.min.js")).pipe(load.uglify()).pipe(gulp.dest("./dist"));
}));

上面这种promise写法，通过return promise，在执行完成任务后，执行其中的res，执行后续save任务中的函数方法，打印aaaa

事件完成操作后回调

以上的案例是js任务解决了ES6转换ES5，任务save重新获取转换好的js文件合并压缩后存储为main.min.js。但是使用上面两个方法后，我们发现后面没有合并存储，原因是什么呢？上面的两种写法在任务中标识完成了，但是不代表操作就完成了，js任务最后存储是需要时间的，但是当开始存储时就已经执行了后续的任务，显然在后续任务中不能找到这个被转换后的文件。那么我们应该通过什么操作，这里我们需要等待上面内容完成后才可以操作后续内容
```
gulp.task("js",function(done){gulp.src("./src/**/*.js").pipe(load.babel({"presets": ["@babel/env"]})).pipe(gulp.dest("./dist")).on("end",done);
})
gulp.task("save",gulp.series("js",function(){console.log("aaaa")gulp.src("./dist/**/*.js").pipe(load.concat("main.min.js")).pipe(load.uglify()).pipe(gulp.dest("./dist"));
}));
```
通过事件end判断完成存储后再继续执行后续任务

parallel

前置任务和当前任务一同执行

gulp.task("js",function(){gulp.src("./src/**/*.js").pipe(load.babel({"presets": ["@babel/env"]})).pipe(gulp.dest("./dist"))
})
gulp.task("save",gulp.parallel("js",function(){console.log("aaaa")gulp.src("./js/**/*.js").pipe(load.concat("main.min.js")).pipe(load.uglify()).pipe(gulp.dest("./dist"));
}));

这个任务中，使用了parallel在处理任务中是并行的，可以看到后续任务并不需要依赖js任务完成而执行，是在于js任务同时开始的，因此，js任务也不需要执行回调函数或者promise

常用gulp插件

自动加载插件

gulp-load-plugins

npm install --save-dev gulp-load-plugins

在gulpfile中如果需要使用别的插件，导入方法我们使用require。那么如果需要加载很多就会出现这种情况

var gulp = require('gulp'),//一些gulp插件,abcd这些命名只是用来举个例子a = require('gulp-a'), b = require('gulp-b'),c = require('gulp-c'),d = require('gulp-d'),e = require('gulp-e'),f = require('gulp-f'),g = require('gulp-g'),//更多的插件...z = require('gulp-z');

我们可以这样做：
安装并导入gulp-load-plugins
在package.json的devDependencies中写下需要加载的插件，这个是开发依赖

var load=require("gulp-load-plugins")();load.rename("a.js")

这里的rename就是一个插件，这插件叫gulp-rename

压缩文件

gulp-uglify

npm install --save-dev gulp-uglify

可以将文件中的空格去除

gulp.task("default",function () {gulp.src("./js/a.js").pipe(uglify()).pipe(gulp.dest("./dist"))
});

重命名

gulp-rename
npm install --save-dev gulp-rename
可以重新给文件起名

gulp.task('rename', function () {gulp.src('js/jquery.js').pipe(uglify())  //压缩.pipe(rename('jquery.min.js')) //会将jquery.js重命名为jquery.min.js.pipe(gulp.dest('js'));
});

css文件压缩

css文件压缩
gulp-minify-css
npm install --save-dev gulp-minify-css

var gulp = require('gulp'),minifyCss = require("gulp-minify-css");gulp.task('minify-css', function () {gulp.src('css/*.css') // 要压缩的css文件.pipe(minifyCss()) //压缩css.pipe(gulp.dest('dist/css'));
});

html文件压缩

html文件压缩
gulp-minify-html
npm install --save-dev gulp-minify-html

var gulp = require('gulp'),minifyHtml = require("gulp-minify-html");gulp.task('minify-html', function () {gulp.src('html/*.html') // 要压缩的html文件.pipe(minifyHtml()) //压缩.pipe(gulp.dest('dist/html'));
});

文件合并

文件合并
gulp-concat
npm install --save-dev gulp-concat

var gulp = require('gulp'),concat = require("gulp-concat");gulp.task('concat', function () {gulp.src('js/*.js')  //要合并的文件.pipe(concat('all.js'))  // 合并匹配到的js文件并命名为 "all.js".pipe(gulp.dest('dist/js'));
});

sass解析

gulp-sass
npm install --save-dev gulp-sass

var gulp = require('gulp'),sass = require("gulp-sass");gulp.task('compile-sass', function () {gulp.src('sass/*.sass').pipe(sass()).pipe(gulp.dest('dist/css'));
});

图片压缩

图片压缩
gulp-imagemin
npm install --save-dev gulp-imagemin

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');gulp.task('default', function(){gulp.src('src/images/*').pipe(imagemin()).pipe(gulp.dest('dist/images'))}
);

静态服务器搭建

var gulp=require("gulp");
var load=require("gulp-load-plugins")();
var browser=require("browser-sync").create();
gulp.task("save",function(done){gulp.src("./src/**/*.js").pipe(load.babel({presets:['@babel/env']})).pipe(load.concat("main.min.js")).pipe(load.uglify()).pipe(gulp.dest("./dist")).on("end",browser.reload);
});
gulp.task("server",function(){browser.init({server:"./",port:3009})gulp.watch("./src/**/*.js",gulp.series("save"));
})

browser-sync是静态服务器，create()开启创建
使用browser.init创建服务位置和端口
使用gulp.watch做监听，并且重新执行js的合并压缩打包等处理，最后当存储完成后，刷新网页browser.reload是重载页面

gulp的安装与使用相关推荐

gulp的安装和配置详解
gulp的安装和配置详解 1.安装node.js 先下载一个node.js安装包. 下载完成后双击即可. 打开cmd,命令行输入node -v,回车输出nodejs版本号,表示安装成功. 命令行输入n ...
Gulp的安装与配置
#Gulp的安装与配置# 标签(空格分隔): 工具下载nodejs安装包安装Nodejs 测试配置npm的全局路径全局安装gulp 本地安装gulp gulp的实施与使用安装相关插件 Gul ...
gulp安装流程、使用方法及cmd常用命令导览
gulp安装流程.使用方法及CMD常用命令导览来自前端小白的gulp及周边知识学习总结一.名词介绍: Npm--node包管理工具一开始我不理解,包管理工具是什么鬼.后来用到的gulp也好,gu ...
基于node.js的压缩合并安装
1.构建工具(grunt,gulp) 下载地址: http://gruntjs.cn/ http://gruntjs.com/ (1)安装nodejs(http://www.nodejs.org/) ...
Gulp快速入门教程
Gulp是基于流的前端自动化的构建工具,虽说如今是webpack盛行的时代,但是gulp和webpack整合效果更美味的,鱼与熊掌都可兼得哦!本文只介绍下Gulp的基本使用和一些常用的Gulp插件,废 ...
基于 gulp 的 fancybox 源码压缩
前不久,处理生信分析的网页版自动化报告时候就使用过 fancybox,今天在优化个人博客,为博文增加图片缩放效果,解决一些滚动条问题时,才从 fancybox 的 Github 源码中接触到 gulp ...
Gulp 自动化的项目构建工具
在很多场合都会听到前端工和 node 程师推荐 Grunt 来实现项目的自动化,自动化可以自动完成 javascript/coffee/sass/less 等文件的的测试.检查.合并.压缩.格式化.部 ...
angular1配合gulp和bower使用
一安装gulp和bower gulp安装: npm install -g gulp bower安装: npm install -g bower ==注:== angularjs的一些包文件我们是通过 ...
利用gulp对项目html,js,css,图片进行压缩
1,下载安装node 访问 http://nodejs.org ,然后点击大大的绿色的 install 按钮,下载完成后直接运行程序,就一切准备就绪. npm 会随着安装包一起安装, 2,打开代码行 ...

gulp的安装与使用

gulp

什么是gulp？

gulp的安装：

开始使用gulp

gulp的方法

gulp的工作方式

src方法

dest方法

task方法

watch方法

gulp4

series

parallel

常用gulp插件

自动加载插件

压缩文件

重命名

css文件压缩

html文件压缩

文件合并

sass解析

图片压缩

静态服务器搭建

gulp的安装与使用相关推荐

最新文章

热门文章

gulp的安装与使用

gulp

什么 是gulp？

gulp的安装：

开始使用gulp

gulp的方法

gulp的工作方式

src方法

dest方法

task方法

watch方法

gulp4

series

parallel

常用gulp插件

自动加载插件

压缩文件

重命名

css文件压缩

html文件压缩

文件合并

sass解析

图片压缩

静态服务器搭建

gulp的安装与使用相关推荐

最新文章

热门文章

什么是gulp？