看了就会——简单易懂的gulp入门配置

写在前面：这篇文章 基于gulp3版本写的。如果是gulp4版本运行下面一些指令可能会报错，个别已给出 gulp4版本的解决方案，但是自动刷新的功能找不到gulp4的解决方案，所以仍然提供的是gulp3版本方案。

安装Gulp

安装Gulp之前你需要先安装Node.js。

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

sudo npm install gulp -g

-g 表示全局安装，这样你在电脑上任何位置都能只用gulp 命令。

npm install 是指定从Node Package Manager安装的命令。

只有mac用户才需要sudo命令，Mac 用户需要管理员权限才能全局安装，所以需要sudo。

接下来使用Gulp创建项目。

创建Gulp项目

首先，我们新建一个project文件夹，然后进到目录下执行 npm init 命令：

D:\project>npm init

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

 

创建完之后，我们执行下面的命令： 

npm install gulp--save-dev

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

在正式开始之前，我们来看一下项目的目录结构。 

目录结构

Gulp非常之灵活，理解它的内部工作，你就能在项目中得心应手。

这篇文章，我们使用通用的webapp目录结构： 

 

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

这些文件名，你想怎么起都行，但请务必记住你的目录结构。现在我们来创建gulpfile.js。

第一个Gulp任务

你需要先在根目录下创建一个gulpfile.js文件。

// gulpfile.js 文件引入

var gulp = require('gulp');

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

简单的任务如下所示：

写个Hello World，是这样的：

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

 命令行中执行 gulp hello，发现编译过程如下图所示，说明这个任务已经跑起来了。

但是如果编译如下图，说明出错了，可能是gulp的版本问题。

可以改成这样就没问题了： 

gulp.task('hello', async() => {
     await console.log('Hello World!');
});

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

大概这样：

gulp.task('task-name',function() {
     return gulp.src('source-files')
                .pipe(aGulpPlugin())
                .pipe(gulp.dest('destination'))
})

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

Gulp执行预处理

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

使用npm install 命令安装

npm install gulp-sass --save-dev

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

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

 在任务中使用

gulp.task('sass',function(){
       return gulp.src('source-files')   //这里是传入的需要gulp的源文件
                  .pipe(sass()) // 这里是前面require进来的gulp-sass插件
                  .pipe(gulp.dest('destination'))  //这里是输出的目标文件

});

我们需要给sass任务提供源文件和输出位置。所以我们先在项目中创建app/scss文件夹，再在scss文件夹下新建styles.scss文件。这个文件将在gulp.src中用到。

sass处理之后，我们希望它生成css文件并产出到app/css目录下，可以这样写：

gulp.task('sass',function(){
       return gulp.src('app/scss/styles.scss')
                  .pipe(sass())
                  .pipe(gulp.dest('app/css'))
});

然后在styles.scss 写一些样式代码：

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

styles.css是gulp自动为我们生成的。
使用Sass就这么简单。但是通常我们不止有一个scss文件。这时候可以使用Node通配符

Node中的通配符

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

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

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

*.scss ： * 号匹配当前目录任意文件，所以这里 *.scss 匹配当前目录下所有scss文件

*/.scss ：匹配当前目录及其子目录下的所有scss文件。

!not-me.scss ：！号移除匹配的文件，这里将移除not-me.scss

*.+(scss|sass) ：+号后面会跟着圆括号，里面的元素用|分割，匹配多个选项。这里将匹配scss和sass文件。

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

gulp.task('sass',function() {
         return gulp.src('app/scss/**/*.scss')
                    .pipe(sass())
                    .pipe(gulp.dest('app/css'))

})

我们这会再在scss文件夹下新建一个style2.scss文件。

命令行执行gulp sass。然后再看app/css目录下，现在已经有两个文件了，分别是：style.css 和 style2.css。

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

监听Sass文件

Gulp提供watch方法给我们，语法如下：

gulp.watch('files-to-watch', ['tasks','to','run']);

将上面的栗子再改下：

gulp.watch('app/scss/**/*.scss', ['sass']);

通常我们监听的还不只是一个文件，把它变成一个任务：

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

执行gulp watch命令。

如果是gulp4 版本的会报错如下：

原因是 ['sass']是Gulp3的方式指定依赖任务，在Gulp4中使用gulp.series和gulp.parallel。

改成这样就好：

gulp.task('watch', function(){
      gulp.watch('app/scss/**/*.scss', gulp.series('sass'));
      // Other watchers
});

有了监听，每次修改文件保存之后，Gulp都将自动为我们执行任务。

还不够，修改完直接帮我刷新浏览器行吗。

使用Browser Sync自动刷新

Browser Sync 帮助我们搭建简单的本地服务器并能实时刷新浏览器

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

npm install browser-sync--save-dev

引入：

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

我们创建一个broswerSync任务，我们需要告知它，根目录在哪里。

gulp.task('browserSync', function() {
    browserSync({
        server: {
            baseDir:'app'
        },
    })
})

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

gulp.task('sass',function() {
    return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scssin app/scss
        .pipe(sass())
        .pipe(gulp.dest('app/css'))
        .pipe(browserSync.reload({
            stream:true
    }))
});

然后改一下watch任务如下：

gulp.task('watch', gulp.series('sass', 'browserSync', function(){
      gulp.watch('app/scss/**/*.scss', gulp.series('sass'));
      // Other watchers
}));

执行 gulp watch:

！！！但是改动文件之后，并没有实时刷新，终端也没有监听得到。找了很久没有找到方法解决，我最后把gulp的版本降回了3.9。

cnpm install [email protected]

然后改了gulpfile.js 文件的watch任务写法如下：

gulp.task('watch', ['browserSync', 'sass'], function (){
        gulp.watch('app/scss/**/*.scss', ['sass']);
})

再执行gulp wacth 此时发现 再改动scss文件。终端立马监听得到并且浏览器页面也自动刷新了。真是折腾啊！！！

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

gulp.task('watch', ['browserSync', 'sass'], function (){
        gulp.watch('app/scss/**/*.scss', ['sass']);
        gulp.watch('app/*.html', browserSync.reload);
        gulp.watch('app/js/**/*.js', browserSync.reload);
});

现在不论是改动scss，还是html，还是js都能自动刷新了。

 

---

附上gulpfile.js 的代码：

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');

gulp.task('hello', async() => {
   await console.log('Hello World!');
});

//编译Sass
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
    }))
});

gulp.task('browserSync', function() {
  browserSync({
    server: {
      baseDir: 'app'
    },
  })
});

//监听
gulp.task('watch', ['browserSync', 'sass'], function (){
     gulp.watch('app/scss/**/*.scss', ['sass']);
   gulp.watch('app/*.html', browserSync.reload);
    gulp.watch('app/js/**/*.js', browserSync.reload);
});

今天参考网上的文章学习了gulp，一边记录下来。希望能加深记忆的同时帮到需要的人。