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中解决-参见- 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
  • 我将提供安装和卸载说明，以使用gulp4.
  • First: Uninstalling gulp 3 and installing gulp 4
    • I'm going to provide install and uninstall directions in order to use gulp 4.
    • 我将为您提供最基本的版本，如果可以的话，
    • 根据您显示给我的文件，尝试我提供的第二个版本来满足您提到的需求.
    1. 根据显示的gulp文件，这里有一些关于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)

  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:

  gulp

  • 如果在终端中看到:It's working!，则说明gulp 4已正确安装.
  • 如果您看到正在运行！"而且还有一些错误，那么您将需要解决这些错误，但是问题应该出在您的gulpfile.js文件中. (如果自发布以来已经过去了一段时间，请参阅更多最新的安装/卸载说明和最新的gulp 4教程).
  • 如果您仅看到错误(并且根本没有显示正在运行！")，则可能是gulp 4未正确安装或gulp 3未正确删除，因此您应该同时卸载gulp 3和4并重新安装gulp4.注意::如果您尝试了各种来自各种来源的各种安装说明，则很有可能会发生这种情况.
  • 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')
  ));
  

  尽管我说这是最终版本，但为了使gulp.series和gulp.parallel正常工作，我将可选的message任务留在了gulpfile中.我在下面的最后一节中简要介绍了它们. 不必要，可以将其删除.

  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:任务.例如watch:scripts.

  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'来使watch任务正常工作，而不得不使用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手表，我不得不提出解决方案.这样做很好，并且如果您愿意，还可以提供执行其他一些任务的其他好处.

  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屋！