gulp.js是什么_使用Gulp.js自动完成无聊的工作

gulp.js是什么

全面披露 ：

这对Webpack毫无异议，实际上Webpack是我最喜欢的React React Blunder，而不是create-react-app。

如果您已经在使用Webpack，您已经知道它的配置过程，那么在这里，我就不会研究设置Webpack来配置您的react应用程序的过程，让我们假设您已经经历了太多次了。

用例之一是在构建过程完成后生成一个缩小的scss文件。

经过数小时的阅读，文档和配置Webpack的过程i偶然发现了这个很棒的评论，它总结了产品发布的整个过程

不用担心，这是我们的任务执行者派上用场的地方。 输入您友好的任务运行程序gulp.js即可自动完成真正无聊的工作。

借助gulp提供的自动化功能，我在准备发布版本之前将我花了将近一个小时的时间才缩减到只有几分钟。

它假设您知道如何使用webpack并为react应用设置基本配置，否则，请担心不遵循此文件夹结构进行设置。

这应该使您入门，让我们看一下gulpfile.js，其中包含有关gulp运行器自动执行过程的说明

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

var gulp = require('gulp');

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

var rename = require('gulp-rename');
gulp.task('styles', function () {

return gulp.src('./main.scss')

.pipe(sass({ outputStyle: 'nested', precision: 10, includePaths: ['.'], onError: console.error.bind(console, 'Sass error:') }))
.pipe(csso())

.pipe(rename(function(path) { path.extname = '.min.css'; }))

.pipe(gulp.dest('./'))

});

可以将Task Runner分解为运行这些自动化任务的简单步骤

1. gulp-csso package is used to parse our sass definitions witten for the react app
2. gulp-rename is package that is used to specify any custom name that we require as the output of the automated task
3. The first pipe command reads the contents of the files in the specified location and all the other files that are added in the definitions of those sass files
4. The second pipe command converts to the css minified output of these files
5. The following pipe command uses the rename function to add the contents of the minified output to the file with the extension .min.css The following pipe command uses the rename function to add the contents of the minified output to the file with the
6. The Last pipe command stores the minified output in the destination specified.

因此，赋予了我们自动化的权力，并减少了当我们手动执行这些任务时易于注入的所有错误。

这是使用Gulp运行程序进行的任务自动化的快速预览。

您可以在github存储库中找到源代码和模板

谢谢，快乐编码:)

翻译自: https://hackernoon.com/automate-the-boring-stuff-using-gulpjs-9h3y3ybc

gulp.js是什么