Gulp的简介
gulp,英文的意思是吞咽 (英 [gʌlp]) ( 美 [ɡʌlp] ),具体读啥大家自己看音标。
Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务:
- 搭建web服务器
- 文件保存时自动重载浏览器
- 使用预处理器如Sass、Less
- 优化资源,比如压缩CSS、JavaScript、压缩图片
以上应该是所有的主流打包,构建工具都支持的功能。
当然Gulp能做的远不止这些。如果你够疯狂,你甚至可以使用它搭建一个静态页面生成器。
基于本人水平的限制,这篇博客的目的是帮助大家了解Gulp的基础用法,让大家能看懂gulp的配置。
为什么是Gulp?
类似Gulp的工具,我们通常称之为构建工具。如今最流行的两个构建工具是Gulp和Grunt,以及后起之秀Webpack,这么说其实不是很准确,Webpack 是一个模块打包工具。它将一堆文件中的每个文件都作为一个模块,找出他们的依赖关系,将它们打包为可部署的静态资源。
官方对webpack的定位是模块打包器,而gulp/grunt属于构建工具。他们功能是有重叠的地方,但从本质上来讲不是一种东西。
说回来,为什么是Gulp,效率的东西先不谈,单说难易程度,gulp的配置文件更加的简洁,配置的写法逻辑对前端工作人员更加的友好。而且基于unix的pipe思想,在编写构建任务代码让人感觉非常舒服的,更利于开发人员的维护和阅读。
安装Gulp
安装Gulp之前你需要先安装Node.js。
安装完Node.js,使用cmd,用下面命令安装Gulp
npm install gulp -g
-g表示全局安装,这样你在电脑上任何位置都能只用gulp 命令。
下面我带大家从头到尾创建一个基于gulp的项目。
创建Gulp项目
首先,我们新建一个project文件夹,并在该目录下执行
npm init
npm init命令会为你创建一个package.json文件,这个文件保存着这个项目相关信息。比如你用到的各种依赖(这里主要是插件)
{
"name": "gzy",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
创建完之后,我们执行下面的命令:
npm install gulp --save-dev
这一次,我们局部安装Gulp。使用–save-dev,将通知计算机在package.json中添加gulp依赖。
{
"name": "gzy",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^4.0.0"
}
}
目录结构
我们使用通用的webapp目录结构,dist文件夹用来存放生产环境下的内容。
第一个Gulp任务
(你需要先在根目录下创建一个gulpfile.js文件)。
先创建个简单的task
var gulp = require('gulp');
gulp.task('hello', function() {
console.log('Hello World!');
});
然后我们用webstorm或vscode打开我们创建的project项目。
这是一个简单的task,但是正常使用的task也就比这个复杂一丢丢。
下面用编译Sass来举例子。
Gulp执行预处理
我们使用gulp-sass插件来编译Sass。
安装插件的步骤是这样的:
npm install gulp-sass --save-dev
在gulpfile中引入插件,用变量保存,并使用
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('hello', function() {
console.log('Hello World!');
});
gulp.task('sass', function(){
return gulp.src('source-files')
.pipe(sass()) // Using gulp-sass
.pipe(gulp.dest('destination'))
});
我们需要给sass任务提供源文件和输出位置。所以我们先在项目中创建app/scss文件夹,里面有个styles.scss文件。
这个文件将在gulp.src中用到。
sass处理之后,我们希望它生成css文件并产出到app/css目录下,可以这样写:
gulp.task('sass', function(){
return gulp.src('app/scss/styles.scss')
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(gulp.dest('app/css'))
});
原来的目录:
指令完成后的指令:
styles.css是gulp智动为我们生成的。
在这个例子中我们是设置指定的目标文件:gulp.src(‘app/scss/styles.scss’),但文件多了,不可能一一在后面列出目标文件,这就不得不提Node中的通配符。
Node中的通配符
通配符是一种匹配模式,允许你匹配到多个文件。不止是Node,很多平台都有,有点像正则表达式。
使用通配符,计算机检查文件名和路径进行匹配。
大部分时候,我们只需要用到下面4种匹配模式:
- .scss: * 号匹配当前目录任意文件,所以这里.scss匹配当前目录下所有scss文件.
- **/*.scss:匹配当前目录及其子目录下的所有scss文件。
- !not-me.scss:!号移除匹配的文件,这里将移除not-me.scss
- *.+(scss|sass):+号后面会跟着圆括号,里面的元素用|分割,匹配多个选项。这里将匹配scss和sass文件。
监听Sass文件
gulp提供和grunt一样的watch方法,对各种任务进行监听操作。
具体的语法如下:
gulp.watch('files-to-watch', ['tasks', 'to', 'run']);
通常我们监听的还不只是一个文件,把它变成一个任务:
gulp.task('watch', function(){
gulp.watch('app/scss/**/*.scss', ['sass']);
// Other watchers
})
上面的写法在新版的gulp已经不支持了。
gulp.task('watch1', function(){
gulp.watch('app/scss/**/*.scss', gulp.series('sass'));
// Other watchers
})
执行gulp watch命令。
有了监听,每次修改文件,Gulp都将自动为我们执行任务。
使用Browser Sync自动刷新
Browser Sync 帮助我们搭建简单的本地服务器并能实时刷新浏览器。
npm install browser-sync --save-dev
这里没有gulp-前缀,因为browser-sync支持Gulp,所以没有人专门去搞一个给Gulp用。
我们创建一个broswerSync任务,我们需要告知它,根目录在哪里。
我们先在头部应用需要的依赖。
var browserSync = require('browser-sync').create();
我们稍微修改一下之前的代码 sass1任务,让每次css文件更改都刷新一下浏览器:
gulp.task('sass1', function() {
return gulp.src('app/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream: true
}))
});
然后我们监听html是否发生变化,如果变化重新渲染页面代码如下:
gulp.task('watch1',gulp.series('sass1',function(){
browserSync.init({
server: "./app"
});
gulp.watch('app/scss/**/*.scss', gulp.series('sass1'));
gulp.watch("app/*.html").on('change', browserSync.reload);
}));
gulp.series('sass1'----------
这种写法是 gulp4.xx才出的语法,以前是[‘a’,‘b’]这种写法,意思是指在执行下面function内的任务前优先任务 a 和 任务b,
现在在gulp4不支持这种写法,需要通过 gulp.series 和 gulp.parallel 的方式映入。
gulp.series:按照顺序执行
gulp.paralle:可以并行计算
gulp.task('my-tasks', gulp.series('a', 'b', 'c', function() {
// Do something after a, b, and c are finished.
}));
gulp.task('build', gulp.parallel('styles', 'scripts', 'images', function () {
// Build the website.
}));
也可以混合使用:
gulp.task('my-tasks', gulp.series('a', gulp.parallel('styles','scripts', 'images'), 'b', 'c', function() {
// Do something after a, b, and c are finished.
}));
到目前为止,我们做了下面三件事:
1.可运转的web开发服务
2.使用Sass预处理器
3.自动刷新浏览器