如何使用Gulp？

时间  2019-11-30
标签 如何 使用 gulp 栏目 JavaScript 繁體版
原文   原文链接

Gulp 是一个自动化工具，前端开发者可使用它来处理常见任务：css

  • 搭建web服务器
  • 文件保存时自动重载浏览器
  • 使用预处理器如Sass、LESS
  • 优化资源，好比压缩CSS、JavaScript、压缩图片

固然Gulp能作的远不止这些。若是你够疯狂，你甚至可使用它搭建一个静态页面生成器。Gulp真的足够强大，但你必须学会驾驭它。html

这是这篇文章的主要目的。帮助你了解Gulp的基础用法，助你早日完成一统天下的大业。前端

在咱们深刻了解以前，咱们先来讲说为何是Gulp。node

为何是Gulp?

相似Gulp的工具，咱们一般称之为构建工具。现在最流行的两个构建工具是Gulp和Grunt。webpack

已经有很是多的文章论证它们以前的异同，你随便搜一下就知道了。git

主要区别是你如何使用他们构建自动化工做流。与Grunt相比，Gulp更加简洁，执行效率更高。github

让咱们继续学习Gulp并搭建一个简单的工做流。web

咱们将要作的

这篇文章的最后，你会拥有简单的一个工做流：正则表达式

  • 搭建本地web服务器
  • 编译Sass
  • 每当保存更改，自动刷新浏览器
  • 优化&压缩资源

除此以外，你还将学会使用简单命令链式调用多个任务。npm

安装Gulp

安装Gulp以前你须要先安装Node.js。
若是你还没安装Node，你能够在 这里 下载。

安装完Node.js，使用Terminal(终端，win下是cmd)用下面命令安装Gulp

1
 
$ sudo npm install gulp -g

只有mac用户才须要sudo命令，而且不要把$符号也复制进去，这不是你的菜。

npm install是指定从Node Package Manager(npm 你怕毛)安装的命令。
-g表示全局安装，这样你在电脑上任何位置都能只用gulp 命令。

Mac 用户须要管理员权限才能全局安装，因此须要sudo。

接下来使用Gulp建立项目。

建立Gulp项目

首先，咱们新建一个project文件夹，并在该目录下执行npm init命令：

1
 
$ npm init

 

npm init命令会为你建立一个package.json文件，这个文件保存着这个项目相关信息。好比你用到的各类依赖（这里主要是插件）
（终端会自动出现下面内容，这里先随便填就行）

npm-init

npm-init

 

建立完以后，咱们执行下面的命令：

1
 
$ npm install gulp --save-dev

这一次，咱们局部安装Gulp。使用–save-dev，将通知计算机在package.json中添加gulp依赖。
package-json

package-json

 

执行完以后，gulp将建立node_modules文件夹，里面有个gulp文件夹。

node-modules

node-modules

 

在正式开始以前，咱们再来明确下项目的目录结构。

目录结构

Gulp很是之灵活，理解它的内部工做，你就能在项目中驾轻就熟。
这篇文章，咱们使用通用的webapp目录结构：
structure

structure

 

在这个结构中，咱们使用app文件夹做为开发目录（全部的源文件都放在这下面），dist文件夹用来存放生产环境下的内容。

这些文件名，你想怎么起都行，但请务必记住你的目录结构。
如今咱们来建立gulpfile.js。

第一个Gulp任务

（你须要先在根目录下建立一个gulpfile.js文件）。

1
 
var gulp = require('gulp');

 

这行命令告知Node去node_modules中查找gulp包，先局部查找，找不到就去全局环境中查找。
找到以后就会赋值给gulp变量，而后咱们就可使用它了。

简单的任务以下所示：

1
2
3
 
gulp.task('task-name', function() {
 // Stuff here
});

 

task-name 是给你的任务起的名字，稍后在命令行中执行gulp task-name，将运行该任务。

写个HelloWorld，是这样的：

1
2
3
 
gulp.task('hello', function() {
 console.log('Hello World!');
});

 

命令行中执行：

1
 
$ gulp hello

 

那么将会输出Hello World!。 够简单吧？

Gulp任务一般都会比这难一丁点，就一丁点。
一般会包含两个特定的Gulp方法和一些列Gulp插件。

大概这样：

1
2
3
4
5
 
gulp.task('task-name', function () {
 return gulp.src('source-files') // Get source files with gulp.src
 .pipe(aGulpPlugin()) // Sends it through a gulp plugin
 .pipe(gulp.dest('destination')) // Outputs the file in the destination folder
})

 

正如你所见，两个Gulp方法，src,dest，一进一出[捂脸.jpg]。
下面用编译Sass来举栗子。

Gulp执行预处理

咱们使用gulp-sass插件来编译Sass。
安装插件的步骤是这样的：

  • 使用npm install 命令安装

    1
    		 
    $ npm install gulp-sass --save-dev

  • 在gulpfile中引入插件，用变量保存

    1
    2
    3
    		 
    var gulp = require('gulp');
    // Requires the gulp-sass plugin
    var sass = require('gulp-sass');

  • 在任务中使用

    1
    2
    3
    4
    5
    		 
    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目录下，能够这样写：

1
2
3
4
5
 
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'))
});

测试一下：

1
2
3
4
 
// styles.scss
.testing {
 width: percentage(5/7);
}

使用Terminal执行gulp sass,你将看到app/css/styles.css文件下会有下面的代码：

1
2
3
4
 
/* styles.css */
.testing {
 width: 71.42857%;
}

styles.css是gulp智动为咱们生成的。
percentage 是Sass的方法。

使用Sass就这么简单。可是一般咱们不止有一个scss文件。这时候可使用Node通配符。

Node中的通配符

通配符是一种匹配模式，容许你匹配到多个文件。不止是Node，不少平台都有，有点像正则表达式。

使用通配符，计算机检查文件名和路径进行匹配。

大部分时候，咱们只须要用到下面4种匹配模式：

  1. *.scss：*号匹配当前目录任意文件，因此这里*.scss匹配当前目录下全部scss文件
  2. **/*.scss：匹配当前目录及其子目录下的全部scss文件。
  3. !not-me.scss：！号移除匹配的文件，这里将移除not-me.scss
  4. *.+(scss|sass)：+号后面会跟着圆括号，里面的元素用|分割，匹配多个选项。这里将匹配scss和sass文件。

那么仍是上面的栗子，改造一下：

1
2
3
4
5
 
gulp.task('sass', function() {
 return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss and children dirs
 .pipe(sass())
 .pipe(gulp.dest('app/css'))
})

任何app下的scss文件，在执行命令以后将生成对应的css文件存放到相应路径。(智动…)
second-stylesheet

second-stylesheet

 

如今咱们能处理多个文件了，可是不想每次都要执行命令，怎么办？
Gulp就是为懒人而生的，咱们可使用watch命令，自动检测并执行。

监听Sass文件

Gulp提供watch方法给咱们，语法以下：

1
2
 
// Gulp watch syntax
gulp.watch('files-to-watch', ['tasks', 'to', 'run']);

 

将上面的栗子再改下：

1
2
 
// Gulp watch syntax
gulp.watch('app/scss/**/*.scss', ['sass']);

一般咱们监听的还不仅是一个文件，把它变成一个任务：

1
2
3
4
 
gulp.task('watch', function(){
 gulp.watch('app/scss/**/*.scss', ['sass']);
 // Other watchers
})

执行gulp watch命令。
watch-start

watch-start

 

有了监听，每次修改文件，Gulp都将自动为咱们执行任务。

watch-compile

watch-compile

 

还不够，修改完直接帮我刷新浏览器行吗，我不想每次都要手动按Command + R;

使用Browser Sync自动刷新

Browser Sync 帮助咱们搭建简单的本地服务器并能实时刷新浏览器，它还能 同时刷新多个设备

新插件？记住！安装，引入，使用。

1
 
$ npm install browser-sync --save-dev

这里没有gulp-前缀，由于browser-sync支持Gulp，因此没有人专门去搞一个给Gulp用。

1
 
var browserSync = require('browser-sync');

咱们建立一个broswerSync任务，咱们须要告知它，根目录在哪里。

1
2
3
4
5
6
7
 
gulp.task('browserSync', function() {
 browserSync({
 server: {
 baseDir: 'app'
 },
 })
})

咱们稍微修改一下以前的代码，让每次css文件更改都刷新一下浏览器：

1
2
3
4
5
6
7
8
 
gulp.task('sass', function() {
 return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss
 .pipe(sass())
 .pipe(gulp.dest('app/css'))
 .pipe(browserSync.reload({
 stream: true
 }))
});

如今咱们配置好Broswer Sync了，咱们须要运行这两个命令。

咱们能够在watch任务以前告知Gulp，先把browserSync和Sass任务执行了再说。
语法以下：

1
2
3
 
gulp.task('watch', ['array', 'of', 'tasks', 'to', 'complete','before', 'watch'], function (){
 // ...
})

 

应用下来是这样：

1
2
3
4
 
gulp.task('watch', ['browserSync', 'sass'], function (){
 gulp.watch('app/scss/**/*.scss', ['sass']);
 // Other watchers
})

 

如今你执行gulp watch命令，在执行完browserSync和Sass，才会开始监听。
bs-watch

bs-watch

 

而且如今浏览器的显示的页面为app/index.html。你修改了styles.scss以后，浏览器将自动属性页面。
bs-change-bg

bs-change-bg

 

不止是scss修改的时候须要刷新浏览器吧？再改改：

1
2
3
4
5
6
 
gulp.task('watch', ['browserSync', 'sass'], function (){
 gulp.watch('app/scss/**/*.scss', ['sass']);
 // Reloads the browser whenever HTML or JS files change
 gulp.watch('app/*.html', browserSync.reload);
 gulp.watch('app/js/**/*.js', browserSync.reload);
});

 

到目前为止，咱们作了下面三件事：

  • 可运转的web开发服务
  • 使用Sass预处理器
  • 自动刷新浏览器

接下来讲说优化方面的技巧

优化CSS和JavaScript文件

说到优化的时候，咱们须要想到：压缩，拼接。也就是减小体积和HTTP次数。
开发者面临的主要问题是很难按照正确的顺序合并文件。

1
2
3
4
5
6
 
<body>
 <!-- other stuff -->
 <script src="js/lib/a-library.js"></script>
 <script src="js/lib/another-library.js"></script>
 <script src="js/main.js"></script>
</body>

 

因为文件路径的的不一样，使用 https://www.npmjs.com/package/gulp-concat 等插件很是困难。
庆幸的是，gulp-useref 解决了这个问题。

gulp-useref会将多个文件拼接成单一文件，并输出到相应目录。

1
2
3
 
<!-- build:<type> <path> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->

 

能够是js,css,或者remove。若是你设为remove,Gulp将不会生成文件。

指定产出路径。

咱们想最终产出main.min.js。能够这样写：

1
2
3
4
5
 
<!--build:js js/main.min.js -->
<script src="js/lib/a-library.js"></script>
<script src="js/lib/another-library.js"></script>
<script src="js/main.js"></script>
<!-- endbuild -->

 

咱们来安装gulp-useref。

1
 
$ npm install gulp-useref --save-dev

 

引用

1
 
var useref = require('gulp-useref');

 

使用起来很是简单：

1
2
3
4
5
6
 
gulp.task('useref', function(){

 return gulp.src('app/*.html')
 .pipe(useref())
 .pipe(gulp.dest('dist'));
});

 

（新版的gulp-useref已经不须要写多余的useref.assets了）

执行useref命令，Gulp将合并三个script标签成一个文件，并保存到dist/js/main.min.js。

合并完以后，咱们再来压缩。使用gulp-uglify插件。

安装

1
 
$ npm install gulp-uglify --save-dev

 

使用

1
2
3
4
5
6
7
8
 
// Other requires...
var uglify = require('gulp-uglify');
gulp.task('useref', function(){
 return gulp.src('app/*.html')
 .pipe(uglify()) // Uglifies Javascript files
 .pipe(useref())
 .pipe(gulp.dest('dist'))
});

 

搞定！

注意：执行完useref后，html中的script路径将只剩下main.min.js。

useref-html

useref-html

 

王祖蓝：完美~

gulp-useref一样能够用在css上。除了压缩，须要区分，其它内容同js同样。因此咱们使用gulp-if来作不一样处理。
使用gulp-minify-css压缩css。

1
 
$ npm install gulp-if gulp-minify-css --save-dev

 

应用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 

var gulpIf = require('gulp-if');
var minifyCSS = require('gulp-minify-css');

gulp.task('useref', function(){

 return gulp.src('app/*.html')
 // Minifies only if it's a CSS file
 .pipe(gulpIf('*.css', minifyCSS()))
 // Uglifies only if it's a Javascript file
 .pipe(gulpIf('*.js', uglify()))
 .pipe(useref())
 .pipe(gulp.dest('dist'))
});

 

搞定！

再说说如何压缩图片。一样easy。

优化图片

使用gulp-imagemin插件。

1
 
$ npm install gulp-imagemin --save-dev

 

引入，使用

1
2
3
4
5
6
 
var imagemin = require('gulp-imagemin');
gulp.task('images', function(){
 return gulp.src('app/images/**/*.+(png|jpg|gif|svg)')
 .pipe(imagemin())
 .pipe(gulp.dest('dist/images'))
});

 

（全部的gulp插件都是有相关参数能够配置，若是须要，请自行查看。）
压缩图片可能会占用较长时间，使用 gulp-cache 插件能够减小重复压缩。

1
 
$ npm install gulp-cache --save-dev

引入、使用

1
2
3
4
5
6
7
8
9
10
 
var cache = require('gulp-cache');

gulp.task('images', function(){
 return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
 // Caching images that ran through imagemin
 .pipe(cache(imagemin({
 interlaced: true
 })))
 .pipe(gulp.dest('dist/images'))
});

 

接下来，咱们说说发布流程。

清理生成文件

因为咱们是自动生成文件，咱们不想旧文件掺杂进来。
使用 del

1
 
npm install del --save-dev

 

引入、使用

1
2
3
4
 
var del = require('del');
gulp.task('clean', function() {
 del('dist');
});

 

可是咱们又不想图片被删除（图片改动的概率不大）,启用新的任务。

1
2
3
 
gulp.task('clean:dist', function(callback){
 del(['dist/**/*', '!dist/images', '!dist/images/**/*'], callback)
});

 

这个任务会删除，除了images/文件夹，dist下的任意文件。
为了知道clean:dist任务何时完成，咱们须要提供callback参数。

在某些时候咱们仍是须要清除图片，因此clean任务咱们还须要保留。

1
2
3
4
 
gulp.task('clean', function(callback) {
 del('dist');
 return cache.clearAll(callback);
})

 

噢，我真的是废话太多了。把咱们学到的组合到一块吧！

组合Gulp任务

废话了这么多，咱们主要有两条线路。

第一条是开发过程，咱们便以Sass，监听文件，刷新浏览器。

第二条是优化，咱们优化CSS,JavaScript,压缩图片，并把资源从app移动到dist。

开发任务咱们上面的watch已经组装好了。

1
2
3
 
gulp.task('watch', ['browserSync', 'sass'], function (){
 // ... watchers
})

 

咱们也作一个来执行第二条线路。

1
2
3
 
gulp.task('build', [`clean`, `sass`, `useref`, `images`, `fonts`], function (){
 console.log('Building files');
})

 

可是这样Gulp会同时触发[]的事件。咱们要让clean在其余任务以前完成。
这里要用到 RunSequence 。

1
 
$ npm install run-sequence --save-dev

用法以下：

1
2
3
4
5
 
var runSequence = require('run-sequence');

gulp.task('task-name', function(callback) {
 runSequence('task-one', 'task-two', 'task-three', callback);
});

 

执行task-name时，Gulp会按照顺序执行task-one,task-two,task-thre。
RunSequence也容许你同时执行多个任务。

1
2
3
 
gulp.task('task-name', function(callback) {
 runSequence('task-one', ['tasks','two','run','in','parallel'], 'task-three', callback);
});

 

改造咱们的代码：

1
2
3
4
5
6
 
gulp.task('build', function (callback) {
 runSequence('clean:dist',
 ['sass', 'useref', 'images', 'fonts'],
 callback
 )
})

 

开发任务咱们也用runSequence:

1
2
3
4
5
 
gulp.task('default', function (callback) {
 runSequence(['sass','browserSync', 'watch'],
 callback
 )
})

default? 若是你的任务名字叫作default，那么只须要输入gulp命令便可执行。

这里是咱们最终的 代码仓库。

总结

上面的的内容搭建了一个基本的Gulp工做流。还有更精彩的内容等着你去开发。这里提供些插件：

开发过程：

优化：

除了开发和优化过程，你可使用gulp-jasmine写JavaScript单元测试，甚至使用gulp-rync直接部署dist文件到生产环境。

译者的话

花了点时间去学习Gulp，这篇文章是我找到比较全面的，很是适合新手入门。

Gulp其实很是简单，多玩一下，你就能彻底掌握它了，有能力的话，能够尝试开发Gulp插件。

不过正如做者所说，Gulp的强大之处远不止这些，因此他出了本电子书 automating your workflow ，能够帮助你搭建属于本身的工做流，剩下时间去喝咖啡，有兴趣的能够去看看。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程