Gulp入门教程

Posted 2020-09-28

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

• 启动Web Server
• 当文件修改保存后，自动刷新浏览器
• 批量处理Sass或者Less文件
• 优化资源CSS, javascript, 和 images

安装Gulp

-g参数表示全局安装

$ npm install gulp -g

创建Gulp项目

创建一个名为demo的目录(目录名不能用gulp），在目录下运行npm init

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

安装gulp依赖包到项目中

$ npm install gulp --save-dev

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

项目文件结构

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

 

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项目结构

learngulp

运行项目

在项目目录下执行

npm install

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

• 说明：谷歌浏览器安装插件需要FQ，我已经下载了最新版本2.1.0到本地，点击下载（谷歌为.crx文件，火狐为.xpi文件）
• 安装方法：谷歌浏览器安装crx插件方法、火狐浏览器直接将xpi文件拖进浏览器即可安装

执行gulp task

#执行gulp default任务
gulp

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

gulp watch

作者：荞叶
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。