Gulp 4-Gulpfile.js设置

我发现Gulp4的文档非常难找到，所以我想我可以在这里问一下是否有人可以帮忙

无论如何，我对Gulp还是相当陌生的，在我尝试在我们用于开发的虚拟机上运行Gulp3之前，我一直在使用Gulp3，没有任何问题。我的gulp文件非常简单，我只是使用gulp sass将sass编译成css文件，工作正常，但每次保存css文件时，它都会更改文件的写入权限，浏览器无法读取该文件

所以我做了一些研究，很明显这是Gulp 3的一个问题，现在已经在Gulp 4中解决了-参见-。所以我想我会尝试Gulp4，所以我按照这里的说明进行了更新-但是我在设置实际的gulpfile.js时遇到了真正的问题，因为我找不到任何关于它的文档。这是我目前拼凑的东西，但运气不好。。。不幸的是，我的js技能缺乏

示例Gulp 4文件在此-

我需要gulpfile做的就是使用gulp sass编译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正常工作，那么这里应该可以使用

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

指数

• 第一：卸载gulp 3和安装gulp 4
  • 为了使用Gulp4，我将提供安装和卸载说明
• 第二：测试Gulp4是否有效
  • 我会给你一个最基本的版本来尝试，如果这个版本有效的话
• 第三：最终的gulpfile版本
  • 根据您向我展示的文件，尝试我为您提到的需求提供的第二个版本
• 最后：关于Gulp4和当前Gulp4构建的一些注释
• 根据显示的gulpfile，这里是Gulp 4上的一些指针
• 以及当前Gulp4构建0.4.0的快速修复

---

第一：卸载gulp 3和安装gulp 4 如果你还没有从你的系统中删除原来的一饮而尽，你必须这样做。此外，如果已添加它，则必须将其作为项目依赖项删除

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

接下来，您必须将Gulp4作为依赖项在项目中全局安装

npm install -g gulpjs/gulp-cli#4.0

在您的项目中：

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

重要注意事项

现在是

gulpjs/gulp#4.0

（

gulp

，而不是

gulpcli

）

---

第二：测试Gulp4是否有效 gulpfile的基本版本：
注意：如果要复制和粘贴，请更改gulp.src（…）和.pipe（gulp.dest（…）路径

// =========================================================
// 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是否有效：

在终端中运行默认的“吞咽”任务：

gulp

• 如果您看到：

  它正在工作在终端中，则您知道gulp 4已正确安装
  如果您看到“它正在工作！”但也出现了一些错误，那么您需要解决这些问题，但问题应该出在gulpfile.js文件上。（如果发布后已经过了一段时间，请参阅最新的安装/卸载说明和最新的gulp 4教程）
  如果您只是看到错误（并且“它正在工作！”根本没有出现），那么可能是gulp 4没有正确安装，或者gulp 3没有正确删除，您应该卸载gulp 3和4并重新安装gulp 4注意：如果您尝试了各种来源的各种安装说明，则这种情况尤其可能发生
  

如果成功了，那么：

• 让我们备份sass以前为您创建的css文件（如果存在项目），然后删除这些css文件，然后
• 下一步尝试在终端中运行sass任务：

galp sass

如果它成功了（创建了这些文件），那么一切都正常，继续下面的其他代码片段

---

第三：最终的gulpfile版本 以下是基于gulpfile.js的满足您需求的解决方案，如图所示：

// =========================================================
// 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中留下了可选的

消息

任务，以便在工作时显示

gulp.series

和

gulp.parallel

。我将在下面的最后一节简要介绍它们。 它不是必需的，可以移除

您可能还注意到，我添加了一个watch任务，其中包含：

gulp.series（'sass'，gulp.parallel（'watch:style'））

这样，您将来可以添加额外的

watch:

任务。e、 g.

监视：脚本

gulp.series（'sass'）

部分纯粹是一种方便的方法。如果您编写一些代码，然后运行gulp任务，则需要在反映更改之前再次修改它。在运行监视任务之前首先添加

'sass'

，它将在开始监视更改之前进行传输

---

最后：关于Gulp4和当前Gulp4构建的一些注释 1.根据显示的gulpfile，这里是Gulp4上的一些指针 Gulp 4现在使用：

• gulp.series

  ：控制运行的顺序。它按顺序运行任务直到完成，例如：
  

  gulp.series（'task-name-1'，'task-name-2'）

• “gulp.parallel”：与gulp 3之前完成的任务同时运行任务，例如：
  

  galp.parallel（'task-name-3'，'task-name-4'）

• seires

  和

  parallel

  可以一起使用，以更好地控制任务流程，例如：

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

2.以及当前gulp 4构建的快速修复 在这些示例中，您会注意到我在

watch:styles

任务中使用了

gulp.series

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

这大概是由于gulp 4 watch方法中的一个bug造成的。我假设是这样的，因为我不能通过简单地使用

“sass”

来让watch任务工作，而是使用had

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