简单易懂的gulp入门配置简单易懂的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 命令：

npm init

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

文章图片
package.json.png
创建完之后，我们执行下面的命令：

npm install gulp--save-dev

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

文章图片
package.json添加了gulp.png
在正式开始之前，我们再来明确下项目的目录结构。
目录结构 Gulp非常之灵活，理解它的内部工作，你就能在项目中得心应手。
这篇文章，我们使用通用的webapp目录结构：

文章图片
项目目录.png
在这个结构中，我们使用app文件夹作为开发目录（所有的源文件都放在这下面），dist文件夹用来存放生产环境下的内容。
这些文件名，你想怎么起都行，但请务必记住你的目录结构。现在我们来创建gulpfile.js。
第一个Gulp任务 【简单易懂的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 hello.png 但是如果编译如下图，说明出错了，可能是gulp的版本问题。

文章图片
gulp hello2.png 可以改成这样就没问题了：

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 写一些样式代码：

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

文章图片
styles.css.png 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文件。

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

文章图片
style2.css.png 现在我们能处理多个文件了，但是不想每次都要执行命令，怎么办？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命令。

文章图片
gulp watch.png 如果是gulp4 版本的会报错如下：

文章图片
gulp watch error.png ['sass']是Gulp3的方式指定依赖任务，在Gulp4中使用gulp.series和gulp.parallel。
改成这样就好：

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

有了监听，每次修改文件保存之后，Gulp都将自动为我们执行任务。
gulp-for-beginner-watch-compile.gif 还不够，修改完直接帮我刷新浏览器行吗。
使用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 watch.png

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

cnpm install gulp@3.9.1

然后改了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都能自动刷新了。

文章图片
gulp watch.png

文章图片
gulp-for-beginner-bs-change-bg.gif 附上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，一边记录下来。希望能加深记忆的同时帮到需要的人。