Gulp入门使用（一）

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种匹配模式：

1. .scss： * 号匹配当前目录任意文件，所以这里.scss匹配当前目录下所有scss文件.
2. **/*.scss：匹配当前目录及其子目录下的所有scss文件。
3. !not-me.scss：！号移除匹配的文件，这里将移除not-me.scss
4. *.+(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.自动刷新浏览器