创新路
我们一直在努力

Gulp前端自动化工具新手入门教程(1)

Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务:

  • 搭建web服务器

  • 文件保存时自动重载浏览器

  • 使用预处理器如Sass、LESS

当然Gulp能做的远不止这些。如果你够疯狂,你甚至可以使用它搭建一个静态页面生成器。Gulp真的足够强大,但你必须学会驾驭它。

这是这篇文章的主要目的。帮助你了解Gulp的基础用法,助你早日完成一统天下的大业。

在我们深入了解之前,我们先来说说为什么是Gulp。

为什么是Gulp?

类似Gulp的工具,我们通常称之为构建工具。如今最流行的两个构建工具是Gulp和Grunt。

已经有非常多的文章论证它们之前的异同,你随便搜一下就知道了。

主要区别是你如何使用他们构建自动化工作流。与Grunt相比,Gulp更加简洁,执行效率更高。

让我们继续学习Gulp并搭建一个简单的工作流。

我们将要做的

这篇文章的最后,你会拥有简单的一个工作流:

  • 搭建本地web服务器

  • 编译Sass

  • 每当保存更改,自动刷新浏览器

  • 优化&压缩资源

除此之外,你还将学会使用简单命令链式调用多个任务。

安装Gulp

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

如果你还没安装Node,你可以在 这里 下载。

安装完Node.js,使用cmd用下面命令安装Gulp

$npm  gulp -g

npm install 是指定从Node Package Manager(npm 你怕毛)安装的命令。

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

接下来使用Gulp创建项目。

创建Gulp项目

首先,我们新建一个project文件夹,并在该目录下执行 npm init 命令:

$ npm init

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

创建完之后,我们执行下面的命令:

$ npm install gulp --save-dev

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

执行完之后,gulp将创建node_modules文件夹,里面有个gulp文件夹。

在正式开始之前,我们再来明确下项目的目录结构。

目录结构

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

这篇文章,我们使用通用的webapp目录结构:

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

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

第一个Gulp任务

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

 var gulp = require('gulp');

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

简单的任务如下所示:

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

task-name 是给你的任务起的名字,稍后在命令行中执行gulp task-name,将运行该任务。

写个HelloWorld,是这样的:

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

命令行中执行:

$ gulp hello

那么将会输出Hello World!。 够简单吧?

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

大概这样:

gulp.task('task-name', function () {
  return gulp.src('source-files') // Get source files with gulp.src
    .pipe(aGulpPlugin()) // Sends it through a gulp plugin
    .pipe(gulp.dest('destination')) // Outputs the file in the destination folder
})

正如你所见,两个Gulp方法,src,dest,一进一出[捂脸.jpg]。下面用编译Sass来举栗子。

Gulp执行预处理

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

  • 使用npm install 命令安装

    $ npm install gulp-sass --save-dev
  • 在gulpfile中引入插件,用变量保存

    var gulp = require('gulp');
    // Requires the gulp-sass plugin
    var sass = require('gulp-sass');
  • 在任务中使用

    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.scss
.testing {
  width: percentage(5/7);
}

使用cmd执行gulp sass,你将看到app/css/styles.css文件下会有下面的代码:

/* styles.css */
.testing {
  width: 71.42857%;
}

styles.css是gulp智动为我们生成的。percentage 是Sass的方法。

使用Sass就这么简单。但是通常我们不止有一个scss文件。这时候可以使用Node通配符。

Node中的通配符

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

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

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

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

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

  3. !not-me.scss :!号移除匹配的文件,这里将移除not-me.scss

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

那么还是上面的栗子,改造一下:

gulp.task('sass', function() {
  return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss and children dirs
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
})

任何app下的scss文件,在执行命令之后将生成对应的css文件存放到相应路径。(智动…)

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

监听Sass文件

Gulp提供watch方法给我们,语法如下:

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

将上面的栗子再改下:

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

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

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

执行gulp watch命令。

有了监听,每次修改文件,Gulp都将自动为我们执行任务。

还不够,修改完直接帮我刷新浏览器行吗,我不想每次都要手动按Command + R;

使用Browser Sync自动刷新

Browser Sync 帮助我们搭建简单的本地服务器并能实时刷新浏览器,它还能 同时刷新多个设备

新插件?记住!安装,引入,使用。

$ npm install browser-sync --save-dev

这里没有gulp-前缀,因为browser-sync支持Gulp,所以没有人专门去搞一个给Gulp用。

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 .scss in app/scss
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.reload({
      stream: true
    }))
});

现在我们配置好Broswer Sync了,我们需要运行这两个命令。

我们可以在watch任务之前告知Gulp,先把browserSync和Sass任务执行了再说。

语法如下:

gulp.task('watch', ['array', 'of', 'tasks', 'to', 'complete','before', 'watch'], function (){
  // ...
})

应用下来是这样:

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

现在你执行gulp watch命令,在执行完browserSync和Sass,才会开始监听。

并且现在浏览器的显示的页面为app/index.html。你修改了styles.scss之后,浏览器将自动属性页面。

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

gulp.task('watch', ['browserSync', 'sass'], function (){
  gulp.watch('app/scss/**/*.scss', ['sass']);
  // Reloads the browser whenever HTML or JS files change
  gulp.watch('app/*.html', browserSync.reload);
  gulp.watch('app/js/**/*.js', browserSync.reload);
});

到目前为止,我们做了下面三件事:

  • 可运转的web开发服务

  • 使用Sass预处理器

  • 自动刷新浏览器

然后你就可以愉快的敲代码了… …

未经允许不得转载:天府数据港官方信息博客 » Gulp前端自动化工具新手入门教程(1)

客官点个赞呗! (0)
分享到:

评论 抢沙发

评论前必须登录!

天府云博 - 做有态度的开发&运维&设计学习分享平台!

联系我们百度云主机