Gulp入门教程

Posted 2021-04-08 js是世界上最好的语言

⎯⎯⎯⎯⎯点击关注⤴︎

Gulp是Web开发中帮你自动完成任务的工具。它可以完成的前端任务包括：

• 启动Web Server

• 当文件修改保存后，自动刷新浏览器

• 批量处理Sass或者Less文件

• 优化资源CSS, javascript, 和 images

Gulp能做的比以上更多。你甚至可以用Gulp创建一个静态站点生成器。Gulp真是非常强大的。下面我们来学习创建自己的Gulp任务。

在开始之前，我们谈谈Gulp和同类工具的对比。

为什么使用Gulp

我们通常称Gulp这类工具为“构建工具”，因为在创建网站的时候，用这类工具来运行任务。目前最流行的构建工具有Gulp和Grunt.
Gulp和Grunt的主要区别在于配置工作流的不同。Gulp的配置更加简洁，运行速度更快。

安装Gulp

安装Gulp之前，你要先安装Node.
安装好Node后，用以下命令安装Gulp

$ sudo npm install gulp -g

npm install npm会安装Gulp到电脑
-g参数表示全局安装，可以在系统任务目录下运行gulp
Mac用户需要sudo前缀，这样才能取得管理权限以全局安装gulp
安装好gulp，下面我们在项目里面应用gulp.

创建Gulp项目

创建一个名为gulp-scss-demo的目录，在目录下运行npm init

mkdir gulp-scss-democd gulp-scss-demonpm init

npm init会在项目下创建一个package.json文件，以保存项目相关信息，如项目名，项目依赖包等。
根据npm init的提示生成package.json

package.json

安装gulp依赖包到项目中

$ npm install gulp --save-dev

这次我们只是把gulp安装到项目目录，而不是全局。
--save-dev会增加开发依赖(dev dependency)配置到package.json

Paste_Image.png

查看项目目录，你会发现gulp包安装在node_modules目录

Paste_Image.png

项目文件结构

Gulp允许你用任务文件结构来构建项目，但是在使用前你最好理解Gulp的内部原理。
本教程使用通用的webapp文件结构

Paste_Image.png

app是开发目录 ，我们的代码就放在这个目录下。
dist（distribution的缩写）是存放发行目录，存放优化后的文件
gulpfile.js是gulp的配置文件

创建gulp任务

使用gulp的第一步是在gulpfile.js中require gulp.

var gulp = require('gulp');

require会在node_modules目录查找名为gulp的包，变量gulp指向gulp包内容

现在我们可以用变量gulp来创建一个任务，基本的格式是这样的。

gulp.task('task-name', function() { 
  // Stuff here});

task-name表示一个gulp任务名。以下hello任务会打印Hello Sam

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

在Command Line里执行

$ gulp hello

执行结果

Paste_Image.png

在实际项目中，一个Gulp任务会比以上复杂。通常会包含两个Gulp方法和一些Gulp插件。

gulp.task('task-name', function () {  return gulp.src('source-files') // 待处理文件
    .pipe(aGulpPlugin()) // 用Gulp插件处理文件
    .pipe(gulp.dest('destination')) // 输出到目标文件})

一个真正意义上的任务包含两个Gulp方法 - gulp.src和gulp-dest.

下面我们来构建一个真正的任务，把Sass文件编译成CSS文件。

Gulp预处理

gulp-sass插件可以把Sass文件编译成CSS文件。

$ npm install gulp-sass --save-dev

安装gulp-sass并把配置写入package.json

在gulpfile.js里面引入gulp-sass

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

我们创建在app/scss目录下创建styles.scss. 在gulpfile.js里面添加sass任务

gulp.task('sass', function(){  return gulp.src('app/scss/styles.scss')
    .pipe(sass()) // 用gulp-sass编译scss文件
    .pipe(gulp.dest('app/css'))
});

待处理文件app/scss/style/scss,用gulp-sass编译后输出到 app/css目录。Sass和Scss的区别

在styles.scss中添加内容以测试

.testing {  width: percentage(5/7);
}

在Command Line下执行

$ gulp sass

可以看到编译后的app/css/styles.css文件内容

.testing { 
  width: 71.42857%; 
}

至此，编译scss文件成功！

大多数时候，我们需要一次编译许多scss文件，而不是像上例中一个文件。Node globs可以帮到我们。

Node globs

Globs是文件匹配模式，允许我们在gulp.src方法里面匹配到多个文件，很像正则表达式吧，区别在于Globs用在文件路径上。
一般情况下,Gulp工作流主要用到以下几种Globs匹配模式：

• *.scss 匹配当前目录下所有以.scss结尾的文件

• **/*.scss 切尔西当前目录及所有子目录下，所有以.scss结尾的文``

• !not-me.scss不包含名为not-me.scss文件

• *.+(scss|sass) 匹配当前目录下所有以.scss或者.sass结尾的文件

了解完Globs匹配模式，我们修改gulp sass任务，以处理所有.scss文件

gulp.task('sass', function(){  return gulp.src('app/scss/**/*.scss')
    .pipe(sass()) // 用gulp-sass编译scss文件
    .pipe(gulp.dest('app/css'))
});

在app/scss目录下添加main.scss文件，Command Line下执行gulp sass，可以看到app/css目录下多出一个main.css文件

Paste_Image.png

现在我们可以一次性编译多个Scss文件为CSS文件。但是每次改动Scss文件，都需要重新执行gulp sass. 有没有办法可以自动编译呢？
答案是，使用Gulp "watching". 当Scss文件改动时，Gulp自动执行sass任务。

监听Sass文件的改动

watch方法的使用规则：

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

根据我们的需要,在gulpfile.js里添加一行

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

更多时候，我们需要一次监听多个任务，修改刚才添加的一行为

//自动监听文件改变gulp.task('watch', function(){
  gulp.watch('app/scss/**/*.scss', ['sass']); 
  // 其他任务})

gulp_sass.gif

以下重点介绍常用插件和gulp项目结构

运行项目

在项目目录下执行

npm install

谷歌浏览器或火狐安装livereload插件

• 说明：谷歌浏览器安装插件需要翻墙，我已经下载了最新版本2.1.0到本地，点击下载（谷歌为.crx文件，火狐为.xpi文件）

• 安装方法：谷歌浏览器安装crx插件方法、火狐浏览器直接将xpi文件拖进浏览器即可安装

执行gulp task

#执行gulp default任务gulp

监视文件改动, 浏览器自动刷新

gulp watch

Paste_Image.png

---