2.9 KiB
| title | localeTitle |
|---|---|
| Gulp | 吞 |
吞
Gulp是一个JavaScript任务运行器，用于自动执行作为JavaScript开发工作流程一部分的各种任务。 它用于运行已编程的任务，其主要用例是执行重复操作，这些操作用作JavaScript项目的构建过程的路径。
为什么Gulp是有用的
这些任务通常包括code minification （从html文件中删除空格和缩短变量名称以缩小文件大小）和css bundling （将多个CSS文件转换为一个用于与应用程序一起分发），这些都是优化代码加载所需的在网络浏览器中快速。
Gulp在上述情况下有用的原因是缩小和捆绑过程需要在每次更改时发生。每次更改手动执行此操作都不会有效，这是Gulp这样的工具自动执行此操作对于JavaScript开发人员来说是一个很好的工具。
除了上面相对简单的例子， Gulp还有数百个插件，可以自动执行更复杂的任务。这些任务可以包括以下内容：
- 运行单元测试以测试代码是否正常工作。
- 每次保存文件时刷新Web浏览器，即可立即查看更改。
- 将
SASS/LESS转换为CSS，以便可以在浏览器中使用。 - 优化图像以创建具有较低文件大小的
web friendly版本以提高速度。
如何使用Gulp
要开始使用Gulp ，第一步是使用npm安装它。安装后，必须创建gulpfile.js 。此gulpfile是一个文件，其中包含应作为自动化过程的一部分运行的所有Gulp任务。任务是用JavaScript编写的。下面是一个非常简单的gulpfile示例，它从client/templates文件夹中获取任何CSS文件，缩小它们并将缩小的文件放在build/css文件夹中。
var gulp = require('gulp');
var minifyCSS = require('gulp-csso');
gulp.task('css', function(){
return gulp.src('client/templates/*.css')
.pipe(minifyCSS())
.pipe(gulp.dest('build/css'))
});
要运行此gulp任务，您只需在项目根目录中的终端中键入gulp css 。
要查看CSS文件以进行任何更改，请在保存后运行“css”任务。
gulp.watch('css')
.on('change', ['css']);
任务依赖项
默认情况下，gulp将同时运行所有定义的任务并等待一切。要以正确的顺序运行多个任务，您可以将任务作为依赖项添加到另一个任务。
gulp.task('two', ['one'], function() {
// task 'one' is done now
});
使用上面的代码片段，任务two将仅在任务one完成后运行。
Gulpfiles每个文件可以有多个任务，任务也可以分成多个文件供组织使用。这与100个可用的插件一起使它成为JavaScript开发人员非常灵活和有用的框架。