Gulp 4 - Gulpfile.js 设置 [英] Gulp 4 - Gulpfile.js set up

问题描述

我很难找到有关 Gulp 4 的文档，所以我想我可以在这里询问是否有人可以提供帮助.

I'm finding documentation on Gulp 4 extremely hard to find so I thought I might ask here to see if anyone can help.

无论如何，我对 Gulp 还是很陌生，并且一直使用 Gulp 3 没有任何问题，直到我尝试在我们用于开发的虚拟机上运行它.我的 gulp 文件非常简单，我只是使用 gulp-sass 将 SASS 编译为一个运行良好的 css 文件，但是每次保存 css 文件时，它都会更改文件的写权限，并且浏览器无法读取文件！

I'm pretty new to Gulp anyway and have been using Gulp 3 without any problems until I tried running it on a virtual machine we use for development. My gulp file is very straight forward I just use gulp-sass to compile SASS to a css file which was working fine but every time it saves the css file it changes the write permissions on the file and the browser can't read the file!

所以我做了一些研究，显然这是 Gulp 3 的一个问题，现已在 Gulp 4 中修复 - 请参阅 - https://github.com/gulpjs/gulp/issues/1012.所以我想我会尝试 Gulp 4，所以我按照这里的说明进行了更新 - http://www.ociweb.com/resources/publications/sett/gulp-4/ 但我在设置实际的 gulpfile.js 时遇到了真正的问题，因为我找不到任何文档.这是我目前拼凑起来的，但没有运气......不幸的是我的js技能缺乏！

So I did a bit of research and apparently this is an issue with Gulp 3 which has now been fixed in Gulp 4 - see - https://github.com/gulpjs/gulp/issues/1012. So I thought I would try Gulp 4 so I updated as per instructions here - http://www.ociweb.com/resources/publications/sett/gulp-4/ but I'm having real problems setting up the actual gulpfile.js as I can't find any documentation on it. This is what I have pieced together at the moment but no luck... unfortunately my js skills are lacking!!

此处为 Gulp 4 示例文件 - https://gist.github.com/demisx/beef93591edc1521330a

Example Gulp 4 file here - https://gist.github.com/demisx/beef93591edc1521330a

我需要 gulpfile 做的就是使用 gulp-sass 编译 sass

All I need the gulpfile to do is compile sass using gulp-sass

// include gulp
var gulp = require('gulp');

// include plugins
var sass = require('gulp-sass');


var paths = {
  dirs: {
    build: './furniture/css'
  },
  sass: './furniture/sass/**/*.scss'
};


// Shared tasks
gulp.task('glob', function () {
  var pattern = '.build/**/*.css';

  gulp.src(pattern, { read:false })
    .pipe(using());
});

// SASS

gulp.task('sass', function () {
  return gulp.src(paths.sass)
    .pipe(sass())
    .pipe(changed(paths.dirs.build))
    .pipe(gulp.dest(paths.dirs.build))
    .pipe(grep('./furniture/css', { read: false, dot: true }))
});

gulp.task('watch:styles', function () {
  gulp.watch(paths.sass, 'sass');
});

// Default task
gulp.task('default'('build', 'ws', 'watch'));

推荐答案

好吧，我们可能需要更多关于您遇到的错误的信息.但是，如果问题只是让您的 gulpfile.js 正常工作，这应该可以工作.

Well, we might need some more information on the errors you are getting. But, this here should work if the issue is just getting your gulpfile.js working.

如果您已经找到了解决方案，那就太好了.但是对于遇到这种情况的其他人，我会给出一些提示，然后这应该会起作用.

If you already have figured out the solution, then great. But for others who come across this, I will give some tips, and then this should work.

• 首先:卸载 gulp 3 并安装 gulp 4
  • 我将提供安装和卸载说明以便使用 gulp 4.
  • 我会给你一个最基本的版本来试试，如果可行，那么，
  • 根据您向我展示的文件尝试我为您提到的需求提供的第二个版本.
  1. 根据您显示的 gulpfile，这里有一些关于 Gulp 4 的提示，
  2. 以及对当前 gulp 4 build 0.4.0 的快速修复

如果您尚未从系统中删除原始 gulp，则必须这样做.此外，如果您已添加它，则必须将其作为项目依赖项删除.

If you haven't already removed the original gulp from your system, you must do so. Also you must remove it as a project dependency if you've added it.

npm uninstall -g gulp
cd {your-project-dir}
npm uninstall gulp

接下来，您必须全局安装 gulp 4，并将其作为依赖项安装在您的项目中.

Next you must install gulp 4 globally and in your project as a dependency.

npm install -g gulpjs/gulp-cli#4.0

在您的项目中:

npm install --save-dev gulpjs/gulp-cli#4.0

重要提示

现在是 gulpjs/gulp#4.0(gulp 而不是 gulp-cli)

It is now gulpjs/gulp#4.0 (gulp instead of gulp-cli)

gulpfile 的基本版本:
注意:如果要复制和粘贴，请更改 gulp.src(...) 和 .pipe(gulp.dest(...)) 路径.

Basic Version of your gulpfile:
NOTE: Change the gulp.src(...), and .pipe(gulp.dest(...)) paths if you are copying and pasting.

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

// ---------------------------------------------- Gulp Tasks
gulp.task('sass', function(){
    return gulp.src("path/to/sass-file.scss")
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest("path/to/css-destination.css"))
});

// --------------------------------------- Default Gulp Task
gulp.task('default', function(){
    console.log("It's working!");
});

让我们看看 gulp 4 是否有效:

Let's find out if gulp 4 is working:

1. 在终端中运行默认的 gulp 任务:

1. run the default gulp task in your terminal:

一饮而尽

• 如果您在终端中看到:It's working!，那么您就知道 gulp 4 已正确安装.
• 如果您看到它正在工作！"还有一些错误，那么您需要解决这些错误，但问题应该出在您的 gulpfile.js 文件上.(如果发布后已经过了一段时间，请参阅更新的安装/卸载说明和更新的 gulp 4 教程).
• 如果您只是看到错误(并且根本没有出现它正在运行！")，那么可能是 gulp 4 没有正确安装，或者 gulp 3 没有正确删除，您应该同时卸载 gulp 3 和 4并重新安装 gulp 4.注意:如果您尝试了各种来源的各种安装说明，则尤其可能出现这种情况.
• If you see: It's working! in your terminal then you know that gulp 4 is installed correctly.
• If you see "It's working!" but also some errors, then you will need to resolve those, but the issue should be with your gulpfile.js file. (Also see more recent install/uninstall instructions && more recent gulp 4 tutorials if some time has passed since this has been posted).
• If you just see errors (and "It's working!" doesn't at all appear), then it's likely that gulp 4 was not properly installed, or gulp 3 was not properly removed and you should uninstall both gulp 3 and 4 and reinstall gulp 4. NOTE: This is especially likely if you have tried a bunch of various install instructions from various sources.

如果成功了，那么:

• 让我们备份 sass 之前为您创建的 css 文件(如果现有项目)，然后删除这些 css 文件，然后
• 接下来尝试在终端中运行你的 sass 任务:

gulp sass

如果它有效(创建了这些文件)，那么一切正常并继续下面我的其他片段.

If it worked (created those files), then everything is working and continue to my other snippets below.

这里是根据 gulpfile.js 显示的满足您需求的解决方案:

Here is the solution for your needs based on the gulpfile.js shown:

// =========================================================
// gulpfile.js
// =========================================================
// ------------------------------------------------ requires
var gulp = require('gulp'),
    sass = require('gulp-sass');

// ------------------------------------------------- configs
var paths = {
  sass: {
    src: './furniture/sass/**/*.{scss,sass}',
    dest: './furniture/css',
    opts: {

    }
  }
};

// ---------------------------------------------- Gulp Tasks
gulp.task('sass', function () {
  return gulp.src(paths.sass.src)
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest(paths.sass.dest))
});

// ------------------------------------ Gulp Testing Message
gulp.task('message', function(){
  console.log('It works!!');
});

// ---------------------------------------------- Gulp Watch
gulp.task('watch:styles', function () {
  gulp.watch(paths.sass.src, gulp.series('sass'));
});

gulp.task('watch', gulp.series('sass',
  gulp.parallel('watch:styles')
));


// -------------------------------------------- Default task
gulp.task('default', gulp.series('sass', 
  gulp.parallel('message', 'watch')
));

虽然我说这是最终版本，但我在 gulpfile 中留下了可选的 message 任务，以便显示 gulp.series 和 gulp.parallel 在工作.我将在下面的最后一部分简要介绍它们.它不是必需的，可以删除.

Although I said this is the final version, I've left the optional message task in the gulpfile, in order to show gulp.series and gulp.parallel at work. I briefly cover them in the final section below. It is not necessary and may be removed.

您可能还注意到我添加了一个监视任务，其中包含:
gulp.series('sass', gulp.parallel('watch:styles'))这样您就可以在将来添加额外的 watch: 任务.例如手表:脚本.

You may also notice that I've added a watch task which contains:
gulp.series('sass', gulp.parallel('watch:styles')) This is so that you may in the future, add additional watch: tasks. e.g. watch:scripts.

gulp.series('sass'...) 部分纯粹是一种方便的方法.如果您编写了一些代码然后运行您的 gulp 任务，您将需要再次修改它，然后才能反映您的更改.在运行监视任务之前首先添加 'sass'，它将在开始监视更改之前进行转换.

The gulp.series('sass'...) portion is purely a convenience method. If you write some code and then run your gulp task, you will need to modify it again before your changes are reflected. Adding the 'sass' first before running the watch tasks, it will transpile before it begins watching for changes.

Gulp 4 现在使用:

Gulp 4 now uses:

• gulp.series:控制运行的顺序.它按顺序运行任务直到完成，例如:
  gulp.series('task-name-1', 'task-name-2')
• 'gulp.parallel':在 gulp 3 之前完成的同时运行任务，例如:
  gulp.parallel('task-name-3', 'task-name-4')

• seires 和 parallel 可以一起使用以更好地控制任务的流程，例如:

• gulp.series: Controls the order of what is to be run. It runs the tasks in sequential order until completion, e.g.:
  gulp.series('task-name-1', 'task-name-2')
• 'gulp.parallel': Runs the tasks at the same time as gulp 3 previously had done, e.g.:
  gulp.parallel('task-name-3', 'task-name-4')

• seires and parallel can be used together to better control the flow of the tasks, e.g.:

gulp.task('example', 
  gulp.series('thisTaskIsRunFirst', 'thisSecond',
    gulp.parallel('theseThird-SameTime-1', 'theseThird-SameTime-2')
));  

在这些示例中，您会注意到我在 watch:styles 任务中使用了 gulp.series:

In these examples, you will notice that I had used gulp.series in the watch:styles task:

    // ---------------------------------------------- Gulp Watch
    gulp.task('watch:styles', function () {
      gulp.watch(paths.sass, gulp.series('sass'));
    });

这可能是由于 gulp 4 watch 方法中的一个错误.我假设是这种情况，因为我无法通过简单地使用 'sass' 来让监视任务工作，而不得不使用 gulp.series('sass').
我说这大概是一个错误，因为在我自己学习 gulp 4 时，其他人一直在使用传统的 watch 任务格式和他们的 gulp 4 示例:

This is due to, presumably, a bug in the gulp 4 watch method. I am assuming this is the case, as I could not get the watch task to work by simply using 'sass' and instead had to use gulp.series('sass').
I said presumably it's a bug, as when learning gulp 4 myself, others had been using the traditional watch task format with their gulp 4 examples:

gulp.task('watch', function(){
  gulp.watch('path/of/files/to/watch/**/*.scss', 'sass');
});

为了使用 gulp watch，我不得不想出这个办法.这很好，如果您愿意，还可以提供执行其他一些任务的其他好处.

I had to come up with this work around in order to use gulp watch. Which is fine, and also could provide other benefits of executing some other tasks after if you wish to.

写完后我会回来提供一些 Gulp 4 的教程链接.

I will come back and provide some tutorial links for Gulp 4 once I finish writing them.

这篇关于Gulp 4 - Gulpfile.js 设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！