Gulp 快速入门

绝地灬酷狼 2022-01-19 04:53 241阅读 0赞

# 一、gulp介绍 #

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

--------------------

# 二、工程化的作用 #

1.  自动压缩JS文件
2.  自动压缩CSS文件
3.  自动合并文件
4.  自动编译sass
5.  自动压缩图片
6.  自动刷新浏览器

--------------------

# 三、Node环境安装 #

1.  window下，下载node安装即可。 node下载地址：[nodejs.cn/download/][nodejs.cn_download] ,安装比较简单，基本一直下一步即可，安装路径随意。
2.  安装完成后，终端输入如下命令 显示版本号即安装成功。
3.  `node -v`

--------------------

# 四、gulp安装 #

## (一) 推荐安装cnpm： ##

因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事。网址：[npm.taobao.org][]

## (二) 安装：命令提示符执行 ##

npm install cnpm -g --registry=https://registry.npm.taobao.org
    复制代码

## (三) 全局安装gulp ##

1.  在com中执行

cnpm install gulp –g
    复制代码

1.  查看是否正确安装：命令提示符执行`gulp –v`，出现版本号即为正确安装

--------------------

# 五、gulp插件安装（编译/压缩/合并/代码检查/即时刷新） #

## (一) 项目文件根目录新建`package.json` ##

注：`package.json`是基于nodejs项目必不可少的配置文件，它是存在项目根目录的普通json文件重点内容

1.  进入你的项目文件
2.  执行命令`cnpm init`来新建`package.json`
3.  检测`package.json`是否成功新建查看项目文件根目录，是否新建`package.json`，且内容是否和你终端中输入的一致。 `package.json`内容如下：

{   
      "name": "test", 
      "version": "1.0.0", 
      "description": "我是描述", 
      "main": "index.js", 
      "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  
      "author": "",  
      "license": "ISC"
    }
    复制代码

注：可不使用`cnpm init`方式，可选择手动创建`package.json`配置文件

1.  在项目中新建配置文件`package.json`配置文件是为了将来项目迁移使用，测试demo时，可以不需要

{
       “name”:”test”, //项目名称（必须）
       “version”: “1.0.0”, //项目版本（必须）
       “description”:”This is for study gulp project!”, //项目描述（必须）
       “author”:{ 
          //项目作者信息 
          “name”:”zzl”,
          “email”:[Hsu@xx.com](mailto:Hsu@xx.com)
        },
    
     “devDependencies”:{
        //项目依赖的插件，这个不用写，待会装完插件自动生成       
        “gulp”:”^3.8.11”,
        “gulp-less”:”^3.0.0”
      }
    }
    复制代码

注：由于json文件里是不能写注释的，所以实际开发的时候，记得把注释去掉

1.  `Package.json`的作用 当有一个新的项目需要建立，或者有人跟你合作开发时，我们不需要把项目中所有用到的模块（文件大小可能上百兆）都上传到git,只需要给项目带上一个配置文件 而对方拿到项目后，只需要一个命令`npm install Node`就可以自动读取项目的配置文件，并将所有依赖模块自动下载，这样不是更快捷，更方便吗？

## (二) 本地安装gulp插件 ##

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

## (三) 进入你的项目文件路径中后，执行 ##

cnpm install gulp --save-dev
    复制代码

## (四) 安装`gulp-sass`插件（拿该插件进行示例）进入你的项目文件路径中后，执行 ##

cnpm install gulp-sass  --save-dev
    复制代码

## (五) 常用插件 ##

1.  sass的编译（`gulp-sass`）
2.  less编译 （`gulp-less`）
3.  重命名（`gulp-rename`）
4.  自动添加css前缀（`gulp-autoprefixer`）
5.  压缩css（`gulp-minify-css`）
6.  js代码校验（`gulp-jshint`）
7.  合并js文件（`gulp-concat`）
8.  压缩js代码（`gulp-uglify`）
9.  压缩图片（`gulp-imagemin`）
10. 自动刷新页面（`gulp-livereload`，谷歌浏览器亲测，谷歌浏览器需安装livereload插件）
11. 图片缓存，只有图片替换了才压缩（`gulp-cache`）
12. 更改提醒（`gulp-notify`）

## (六) 安装以上插件 ##

$ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-notify gulp-rename gulp-livereload gulp-cache --save-dev
    复制代码

--------------------

# 六、gulp使用 #

## (一)创建一个`gulpfile.js`在根目录下，gulp只有四个API：`tast`,`watch`,`src`和`dest` ##

1.  `Task`：这个API用来创建任务，在命令下可以输入`gulp test`来执行test任务。
2.  `Watch`: 这个API用来监听任务。
3.  `Src`: 这个API设置需要处理的文件的路径，可以是多个文件以数组的形式`[main.scss，vender.scss]`,也可以是正则表达式`/**/*.scss`。

4.`Dest`: 这个API设置生成文件的路径，一个任务可以有多个生成路径，一个可以输出未压缩的版本，另一个可以输出压缩后的版本

## (二) 载入插件 ##

1.  接下来，我们需要建立一个`gulpfile.js`档案，并且载入这些插件：

var gulp = require('gulp'), 
    sass = require('gulp- sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload');
    复制代码

--------------------

# 七、 Gulp API #

## (一) 工作方式 ##

gulp的使用流程一般是： 首先通过`gulp.src()`方法获取到想要处理的文件流， 然后把文件流通过`pipe`方法导入到`gulp`的插件中， 最后把经过插件处理后的流再通过`pipe`方法导入到`gulp.dest()`中，`gulp.dest()`方法则把流中的内容写入到文件中。 例如：

var gulp = require('gulp');
    gulp.src('script/jquery.js') // 获取流的api
    .pipe(gulp.dest('dist/foo.js')); // 写放文件的api
    复制代码

## (二)`globs`的匹配规则 ##

我们重点说说gulp用到的globs的匹配规则以及一些文件匹配技巧，我们将会在后面用到这些规则。  gulp内部使用了`node-glob模块`来实现其文件匹配功能。我们可以使用下面这些特殊的字符来匹配我们想要的文件：

<table> 
 <thead> 
  <tr> 
   <th>匹配符</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>*</td> 
   <td>匹配文件路径中的0个或多个字符，但不会匹配路径分隔符，除非路径分隔符出现在末尾</td> 
  </tr> 
  <tr> 
   <td>**</td> 
   <td>匹配路径中的0个或多个目录及其子目录,需要单独出现，即它左右不能有其他东西了。如果出现在末尾，也能匹配文件。</td> 
  </tr> 
  <tr> 
   <td>?</td> 
   <td>匹配文件路径中的一个字符(不会匹配路径分隔符)</td> 
  </tr> 
  <tr> 
   <td>[...]</td> 
   <td>匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为^或!时，则表示不匹配方括号中出现的其他字符中的任意一个，类似js正则表达式中的用法</td> 
  </tr> 
  <tr> 
   <td>!(pattern|pattern|pattern)</td> 
   <td>匹配任何与括号中给定的任一模式都不匹配的</td> 
  </tr> 
  <tr> 
   <td>?(pattern|pattern|pattern)</td> 
   <td>匹配括号中给定的任一模式0次或1次，类似于js正则中的(pattern|pattern|pattern)?</td> 
  </tr> 
  <tr> 
   <td>+(pattern|pattern|pattern)</td> 
   <td>匹配括号中给定的任一模式至少1次，类似于js正则中的(pattern|pattern|pattern)+</td> 
  </tr> 
  <tr> 
   <td>*(pattern|pattern|pattern)</td> 
   <td>匹配括号中给定的任一模式0次或多次，类似于js正则中的(pattern|pattern|pattern)*</td> 
  </tr> 
  <tr> 
   <td>@(pattern|pattern|pattern)</td> 
   <td>匹配括号中给定的任一模式1次，类似于js正则中的(pattern|pattern|pattern)</td> 
  </tr> 
 </tbody> 
</table>

下面以例子来加深理解

<table> 
 <thead> 
  <tr> 
   <th>匹配符</th> 
   <th>能匹配</th> 
   <th>不能匹配</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>*.*</td> 
   <td>a.js, style.css, a.b, x.y</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>*/*/*.js</td> 
   <td>a/b/c.js,x/y/z.js,</td> 
   <td>a/b.js,a/b/c/d.js</td> 
  </tr> 
  <tr> 
   <td>**</td> 
   <td>abc,a/b.js,a/b/c.js,x/y/z,x/y/z/a.b,能用来匹配所有的目录和文件</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>**/*.js</td> 
   <td>foo.js,a/foo.js,a/b/foo.js,a/b/c/foo.js</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>a/**/z</td> 
   <td>a/z, a/b/z ,a/b/c/z, a/d/g/h/j/k/z</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>a/**b/z</td> 
   <td>a/b/z,a/sb/z,</td> 
   <td>a/x/sb/z, 因为只有单**单独出现才能匹配多级目录</td> 
  </tr> 
  <tr> 
   <td>?.js</td> 
   <td>a.js,b.js,c.js</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>a??</td> 
   <td>a.b,abc,</td> 
   <td>ab/,因为它不会匹配路径分隔符</td> 
  </tr> 
  <tr> 
   <td>[xyz].js</td> 
   <td>只能匹配 x.js,y.js,z.js,</td> 
   <td>xy.js,xyz.js等, 整个中括号只代表一个字符</td> 
  </tr> 
  <tr> 
   <td>[^xyz].js</td> 
   <td>a.js,b.js,c.js等,</td> 
   <td>x.js,y.js,z.js</td> 
  </tr> 
 </tbody> 
</table>

## (三) src：获取流(源文件路径) ##

`gulp.src()`方法正是用来获取流的，但要注意这个流里的内容不是原始的文件流，而是一个虚拟文件对象流(`Vinyl files`)，这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息。其语法为：`gulp.src(globs[, options])`; globs参数是`文件匹配模式(类似正则表达式)`，用来匹配文件路径(包括文件名)，当然这里也可以直接指定某个具体的文件路径。当有多个匹配模式时，该参数可以为一个数组;类型为`String`或 `Array`。当有多种匹配模式时可以使用数组

//使用数组的方式来匹配多种文件
    gulp.src(['js/\*.js', 'css/*.css', '\*.html'])
    复制代码

## (四) dest：写文件（目标文件路径） ##

`gulp.dest()`方法是用来写文件的，其语法为：

gulp.dest(path[,options])
    复制代码

`path`为写入文件的`路径`；

## (五) watch：监听文件 ##

`gulp.watch()`用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等。其语法为

gulp.watch(glob[, opts], tasks);
    复制代码

如：

gulp.task(“one”,function(){
    
    });
    gulp.task(“two”,function(){
    });
    gulp.watch('js/\*\*/*.js', [“one”,”two”]);
    复制代码

## (六) task：定义任务 ##

`gulp.task`方法用来定义任务，其语法为：

gulp.task(name[, deps], fn)
    复制代码

`name`为`任务名`； `deps` 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数； `fn` 为`任务函数`，我们把任务要执行的代码都写在里面。该`参数也是可选`的。 当你定义一个简单的任务时，需要传入`任务名字`和`执行函数`两个属性。 如：

gulp.task('greet', function () {
         console.log('Hello world!');
    });
    复制代码

--------------------

# 八、 结合sass的使用 #

## (一) 建立任务 ##

1.  编译`sass`,`Autoprefix`及`缩小化`
2.  首先，我们`设置编译Sass`。我们将`编译Sass`、接着通过`Autoprefixer`，最后`储存结果`到我们的`目的地`。接着产生一个`缩小化的.min版本`、`自动重新整理页面`及`通知任务已经完成`：

gulp.task('styles', function() {  
    //编译sass
      return gulp.src('src/styles/main.scss')
        .pipe(sass({ style: 'expanded' }))
    //添加前缀
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    //保存未压缩文件到我们指定的目录下面
        .pipe(gulp.dest('dist/assets/css'))
    //给文件添加.min后缀
        .pipe(rename({suffix: '.min'}))
    //压缩样式文件
        .pipe(minifycss())
    //输出压缩文件到指定目录
        .pipe(gulp.dest('dist/assets/css'))
    //提醒任务完成
        .pipe(notify({ message: 'Styles task complete' }));
    });
    复制代码

1.  说明： `gulp.task('styles', function() { ... )};` 这个`gulp.taskAPI`用来建立任务。可以透过终端机输入`$ gulp styles`指令来执行上述任务。
2.  `return gulp.src('src/styles/main.scss')` 用来定义一个或多个来源档案。
3.  `.pipe(sass({ style: 'expanded' }))` 使用`pipe()`来找到哪个`插件`
4.  `.pipe(gulp.dest('dist/assets/css'));` 这个是用来`设定目的路径`。 \#\#(二) JS代码校验、合并和压缩

//发布任务
    gulp.task(“scripts”,function(){
         //js代码校验
         return gulp.src(“javascripts/*.js”)
         .pipe(jshint())
         .pipe(jshint.reporter(“default”))
         //js代码合并
         .pipe(concat(“all.js”))
         //给文件添加.min后缀
         .pipe(rename({suffix:”.min”}))
         //压缩脚本文件
         .pipe(uglify())
         //输出压缩文件到指定目录
         .pipe(gulp.dest(“assets”))
         //提醒任务完成
         .pipe(notify({message : “Scripts task complete”}));
    });
    复制代码

## (三) 图片压缩 ##

Gulp.task(“images”,function(){
        return gulp.src(“images/*”)
          .pipe(cache(imagemin({optimizationLeve1: 3,progressive:true, interlaced:true})))
          .pipe(gulp.dest(“images”))
          .pipe(notify({message : “Images task complete”}));
    });
    复制代码

## (四) 事件监听 ##

Gulp.task(“watch”,function(){
       gulp.watch(“stylesheets/\*.scss”,[‘styles’]);
       gulp.watch(“javascripts/\*.js”,[“scripts”]);
       gulp.watch(“images/\*”,[‘images’]);
       livereload.listen();
       gulp.watch([“assets/\*”]).on(“change”,livereload.changed);
    });
    复制代码

## (五) 运行 ##

1.  `Gulp default`
2.  `Gulp watch`
3.  运行整个任务`gulp` \#(六) 总结
4.  安装node
5.  安装gulp（全局gulp,本地gulp及所需插件）
6.  新建gulpfile.js文件 3.1 引入模块 3.2 创建任务
7.  运行 gulp 任务名
8.  我们自己设置的项目文件路径 5.1 如： `assets`: 压缩后样式和脚本存放的目录 `images`: 图片存放目录 `javascripts`: 脚本存放目录 `stylesheets`: 样式存放目录 `plugin`: 插件存放目录 `gulpfile.js`

转载于:https://juejin.im/post/5c736fc4f265da2d943f6b8c

[nodejs.cn_download]: https://link.juejin.im?target=http%3A%2F%2Fnodejs.cn%2Fdownload%2F
[npm.taobao.org]: https://link.juejin.im?target=http%3A%2F%2Fnpm.taobao.org