Gulp简介JavaScript任务运行器

为什么我们需要像Gulp这样的任务执行者?

假设您开发了一个基本的节点快速应用程序。 您可能会编写一些符合ES6规范的javascript代码段,例如箭头函数,使用let,import,export语句定义的变量等。浏览器仍然无法完全理解这些ES6语法。 因此,我们需要使用Babel这样的编译器将其转换为与浏览器兼容的JavaScript。 每次更改JavaScript代码时,都应该将其转换为与浏览器兼容的Javascript。 我们无法为每个文件更改权限手动执行此操作。 这是痛苦而又重复的工作。 因此,作为解决方案,我们可以使用gulp为我们做到这一点。 我们需要使用一个名为gulpfile.js配置文件来告诉gulp ,本文稍后将对此进行解释。

让我们使用另一个示例来阐明这一点。 通常,我会精简JavaScript文件来提高应用程序的性能。 缩小过程会删除我们包含在源代码中的注释以及为便于阅读而插入的多余空格。 但是浏览器并不介意这些事情。 因此,通过删除这些文件,可以极大地减小文件大小,有时可以更快地加载页面。 通过在gulpfile.js中声明task,可以轻松实现JavaScript或CSS文件的缩小 。 因此,我们不需要手动运行命令来最小化代码。 这是一个gulp任务的另一个例子。

有很多这样的任务,我们可以在gulp项目中使用。 通过阅读以下示例,您将看到gulp的重要性和力量。

如何开始吃

  1. 将gulp安装为全局依赖项。 (这将在命令行中提供“ gulp”命令)
    npm install -g gulp
  2. 在您的项目中本地安装gulp

npm install --save-dev gulp

3.创建一个名为firstScript.js的文件

  //firstScript.js 
foo =(value1,value2)=> {
total = value1 + value2; //此声明是不必要的
回报
}

现在,我想首先使用Babel转换此基于ES6的代码,然后最小化生成的代码。 让我们看看如何使用gulp做到这一点。

4.在项目根目录级别创建一个名为gulpfile.js的文件。

  // gulpfile.js 
var gulp = require('gulp');

5.然后我们需要一些帮助者来实现我们的目标

首先,我们需要“ gulp-babel”将ES6代码转换为与浏览器兼容的JavaScript。 因此,让我们首先安装依赖项

 npm install --save-dev gulp-babel babel-core babel-preset-env 

然后,我们需要“ gulp-uglify”来最小化JavaScript代码。

npm install --save-dev gulp-uglify

好的,现在我们已经安装了此演示所需的所有依赖项。 但是,当您免费使用https://gulpjs.com/plugins/时,有很多gulp插件可以简化您的生活

让我们在gulpfile.js中要求它们

  var gulp = require('gulp'); 
var babel = require('gulp-babel');
var uglify = require('gulp-uglify');

6.让我们在gulpfile.js中创建一个gulp任务

  gulp.task('es6-uglify', function (){ 
返回 gulp.src('firstScript.js')
.pipe(babel({presets:['env']}))
.pipe(uglify())
.pipe(gulp.dest('build'));
});

在这里,我们使用gulp.task定义了一个gulp任务。 第一个参数是任务的名称,并且不应包含空格。 此处的任务名称为“ es6-uglify”。 当我们想使用gulp在终端中运行任务时,使用此名称。
然后,编写执行gulp任务操作的函数。 在这里,我们给出源文件。 我们要转换firstScript.js。 因此,我们需要先读取文件,然后使用gulp.src()读取文件。 然后,我们使用pipe()给出从gulp.src到babel的可读流进行转换。 .pipe(babel({presets:[‘es2015’]}))转换该JavaScript,然后将结果发送到uglify方法以使用管道进行JavaScript最小化。 最后,我们告诉gulp,我们需要使用作为目标的gulp.dest将最终的最小JavaScript文件保存在目录名称build中。 这是一般的gulp任务的基本流程。

7.我们如何运行它

在终端中,在项目根目录级别输入

  gulp es6-uglify 

这将通过查看您的gulpfile.js以给定名称运行任务。

8.结果

成功运行gulp命令后,您将看到带有firstScript.js的名为“ build”的目录,如下所示。

  “使用严格”; var foo = function(r,t){return r + t}; 

如您所见,gulp-uglify删除了所有注释和多余的空格,并且使用gulp-babel删除了ES6 let关键字和箭头功能。

到目前为止,一切都很好。 但是,更改源文件后,我们是否需要每次都运行“ gulp es6-uglify”命令。 这又是一个痛苦的任务。 但是幸运的是,gulp提供了gulp watch命令的概念来完全自动化该过程。

Gulp手表

Gulp监视仅监视文件中的更改。 让我们在gulpfile.js中创建一个gulp监视程序。 现在,我们希望每次firstScript.js文件更改时都运行gulp任务“ es6-uglify”。

  //gulpfile.js 
gulp.task('watch-mode', function (){
gulp.watch('firstScript.js',['es6-uglify']);
})

在这里,我们定义了一个名为“ watch-mode”的任务。 在函数旁边,我们编写了gulp.watch()来发出监视命令。 首先,您需要提供文件以监视更改。 在这种情况下,它只是我们的firstScript.js。 然后,当更改firstScript.js文件时,我们需要给出执行哪个gulp任务。

现在,如果您在命令行中通过以下方式运行此监视任务,

  gulp观看模式 

它会等待firstScript.js中的文件更改,然后在发生某些更改时,它将自动运行“ es6-uglify” tasak。

所以最后您要了解的是,有四个基本的gulp命令,例如gulp.src,gulp.dest,gulp.task和gulp.watch。 您可以在此处找到API文档。 阅读有关gulp插件的更多信息,并在项目中使用它们来提高生产率。 希望您有一些切入点。