自动化构建工具Gulp初体验

Posted 2021-04-08 前端三人行

自动化构建工具

对于前端开发来说，自动化构建工具非常重要。他能够帮助我们自动完成许多任务，能够极大的提高我们的工作效率。当然，流行的工具比较多，比如grunt，gulp，webpack等，了解不多的同学可能就开始迷茫了，到底应该学习哪一种？其实实际情况上，除了grunt与gulp是存在替换关系，gulp与其他大多数工具都是可以通过插件相互渗透的，比如webpack，在gulp中有gulp-webpack插件能够完成webpack的工作，比如gulp-bower插件能够完成bower的功能。而gulp比grunt效率更高，更简便的IO操作，更少的API，因此我们只需要好好掌握gulp，就足够了，不需要给自己徒增烦恼。

学前准备

安装nodejs与npm

在nodejs官网找到对应的版本安装即可，新的nodejs已经集成了npm，在命令行中输入一下指令检测nodejs与npm是否已经安装成功，如果你是在window下使用命令行，建议使用git的命令行工具

// 输出node版本
> node -v

// 输出npm版本
> npm -v

npm是node的包管理工具，用于管理node的相关插件，使用的几个常用的相关指令如下

// 安装插件
> [sudo] npm install <name> [-g] [--save-dev]

// 卸载插件
> [sudo] npm uninstall <name> [-g] [--save-dev]

// 更新插件
> [sudo] npm update <name> [-g] [--save-dev]

上面的语法中，中括号[]表示可选参数，尖括号<>表示必填参数，他们分别表示的含义如下

[sudo]: 在类unix操作系统下表示允许使用过通过安全的方式使用特殊权限执行后面的指令，比如在mac os x环境下会因为权限问题指令被拒绝就需要使用到它。

<name>: 插件名字，如果是安装gulp-sass，那么指令如下

[-g]: 全局安装

[--save-dev]: 将配置信息保存到package.json文件中的devDependencies字段中中

> npm install gulp-sass

安装gulp

在安装之前，请确保已经安装了nodejs与npm

// 安装gulp
> npm install -g gulp

// 通过输出版本号检测是否已经安装成功
> gulp -v

于是到这里，一切就准备就绪了，是时候来感受一下gulp的魅力了。

我们先通过一个非常简单的例子，了解一下gulp如何将sass文件编译成css的。在动手尝试之前，我们有2个文件需要重点了解一下

package.json

package.json作为gulp的配置文件，能够非常方便的管理nodejs的插件，因为一个项目所要依赖的插件很多，因此不可能将所有的插件都放在git中来管理，我们只需要在项目中保存有一个package.json的配置文件，那么就可以通过下面的指令将该配置文件中的所有依赖包下载下来。

> npm install

在后续的gulp进阶文章中，我会详细的给大家罗列package.json中所有字段的详细功能。另外，由于这个配置文件中仅仅只是一个json，因此我们可以保存我们自己需要的字段，并且通过node读取使用。

gulpfile.js

gulpfile.js是gulp项目中的配置文件，通过这个普通的js文件，我们可以定义gulp的行为，所有的gulp任务都将在这个js文件中来配置。如何编写这个js文件将是我们学会使用gulp的关键。

那么，所有的准备工作与基本的概念我们都有一个了解之后呢，我们就可以通过一个简单的例子来感受一下gulp带给我们的便利了。

实例

通过插件gulp-sass，我们可以将sass文件编译为css文件，sass是css的预编译语言，属于能够10分钟掌握的简单语言，但是它却足够强大，它突破css的局限性，让css也能够玩出花来，值得大家去学习掌握。在实际开发中，为了提高开发效率，我们往往都不会直接使用css，而是通过编写sass或者less，然后编译为css。

任意新建一个文件夹，该文件夹将被当做是我们目前的项目目录。在该目录中安装gulp-sass插件

> npm install gulp-sass

安装完成之后，我们可以看到目录中生成了一个叫做node-modules的文件夹，gulp-sass插件就被安装在node-modules中。

在该目录下新建一个叫做gulpfile.js的文件，并输入以下代码

// gulpfile.js
'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');

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


    return gulp.src('./style/*.scss')
       .pipe(sass())
       .pipe(gulp.dest('./style/'))
});

在上面的代码中，我创建了一个叫做css的任务，该任务识别style文件夹中的sass文件，通过sass()将sass文件转换成css文件并保存在style中。

因此我们在项目根目录下创建style文件夹，文件夹里新建一个叫做test.scss的文件，随便写一点sass语法，就可以查看gulp能否编译成功

body {
    
    margin: 0;

    
    div {
        
        border: 1px solid red;
    
    }
}

运行如下指令

> gulp css

在我的环境下，

➜  learn-gulp git:(master) ✗ gulp css
[16:47:51] Using gulpfile ~/develop/me/learn-gulp/gulpfile.js
[16:47:51] Starting 'css'...
[16:47:51] Finished 'css' after 36 ms

成功运行之后，在style文件夹下面发现了一个新的css文件，test.css，这就是sass文件编译而来。

从上面的例子我们可以看出，gulp构建工具的关键就在gulpfile.js中，为了进一步感受gulp的魅力，我们下面引入更多的插件来管理css文件
所有的插件在gulpfile.js中使用之前，都必须安装，安装通过npm install 指令即可，插件名就是下面js中require后面的名字。

'use strict';
var gulp = require('gulp');

// css 相关插件
var sass         = require('gulp-sass');         // 编译sass
var autoprefixer = require('gulp-autoprefixer'); // 补全前缀
var csscomb      = require('gulp-csscomb');      // 格式化css样式，排序
var cssbeautify  = require('gulp-cssbeautify');  // 美化css样式
var minifycss    = require('gulp-minify-css');   // 压缩css文件

// 错误捕获var plumber = require('gulp-plumber');

gulp.task('css', function() {
    gulp.src('./style/*.scss')
        .pipe(plumber())
        .pipe(sass())
        .pipe(autoprefixer({
            browsers: ['last 2 versions', 'android >= 4.0'],
            cascade: true, //是否美化属性值 默认：true 像这样：
                                        //-webkit-transform: rotate(45deg);
                                        //                transform: rotate(45deg);
           remove:true //是否去掉不必要的前缀 默认：true
       }))
       .pipe(csscomb())
       .pipe(minifycss({
           aggressiveMerging: false,
           advanced: false,            //类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
           compatibility: 'ie7',       //保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
           keepBreaks: true,           //类型：Boolean 默认：false [是否保留换行]
           keepSpecialComments: '*'    //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
       }))
       .pipe(gulp.dest('./style/'));
   });

这样的一个css任务，几乎就可以用于实际开发了。

但我们想要的最终效果是，只要我们保存了sass文件，那么gulp中我们定义的css任务就会自动执行，并且，浏览器中的页面，也会自动刷新。

而现在我们只能输入gulp css指令才能够完成编译，因此我们还需要做许多其他的配置。

gulp.watch 与 gulp-livereload插件

为了能够实现我们想要的效果，我们得借助插件gulp-livereload。通过这个插件，我们能够完成实现浏览器的自动刷新。想要实现这个效果，我们还得在chrome浏览器中安装livereload插件。如果能翻墙就很好办，如果不能翻墙那就自己想办法吧 - -！然后我们还要在gulpfile.js中的css任务中添加如下代码

...
.pipe(gulp.dest('./style/'))
.pipe(livereload({ quiet: true }));

为了能够检测到scss文件的变化，我们还得创建一个watch任务，用于监听文件变化

gulp.task('watch', function() {
    livereload.listen();
    
    
    gulp.watch('./style/*.scss', ['css']);
})
    
    
// 默认执行watch任务
gulp.task('default', ['watch']);

这样，就可以实现我们想要的效果了。在命令行中输入

> gulp

出现下面的提示

➜  learn-gulp git:(master) ✗ gulp
[16:39:02] Using gulpfile ~/develop/me/learn-gulp/gulpfile.js
[16:39:02] Starting 'watch'...
[16:39:02] Finished 'watch' after 13 ms
[16:39:02] Starting 'default'...
[16:39:02] Finished 'default' after 7.08 μs

就表示gulp任务已经启动监听，然后在浏览器中点击一下livereload插件的图标，让中间的空心圆变成实心圆，改变scss文件并保存就能够自动刷新页面了。

文章的中间可能会有一些文件的创建没有说到，因此最好建议大家去github上关注我为大家准备的learn-gulp项目，所有的细节都在里面。配合本文的讲解，相信学会gulp不是难事。

这篇文章算是对gulp的一个简单入门，接下来的一篇文章我会为大家分析一下gulp的一些api，让大家能够轻松自如的编写gulpfile.js。

点击阅读原文，查看learn-gulp项目。