gulp - Gulp 4-Gulpfile.js设置

Question

我很难找到有关Gulp 4的文档，所以我想我可能想问一下是否有人可以提供帮助。

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

所以我做了一些研究，显然这是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技能缺乏！

示例Gulp 4文件在这里-https://gist.github.com/demisx/beef93591edc1521330a

我需要做的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'));

Answer 1

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

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

指数


第一：卸载gulp 3和gulp 4


我将提供安装和卸载说明，以使用gulp 4。

第二：测试以查看gulp 4是否有效


我将为您提供最基本的版本，如果可行，

第三：最终的gulpfile版本


请根据您显示给我的文件，尝试我提供的第二个版本来满足您提到的需求。

最后：关于Gulp 4和当前gulp 4构建的一些说明


根据显示的gulpfile，这里有一些有关Gulp 4的指针
并快速修复当前的gulp 4 build 0.4.0





第一：卸载gulp 3和gulp 4

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

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

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

npm install -g gulpjs/gulp-cli#4.0

在您的项目中：

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

重要笔记

现在是 gulpjs/gulp#4.0（ gulp而不是 gulp-cli）



第二：测试以查看gulp 4是否有效

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


如果在终端中看到： It's working!，则说明gulp 4已正确安装。
如果看到“正在运行！”而且还有一些错误，那么您将需要解决这些错误，但是问题应该出在您的gulpfile.js文件中。 （如果自发布以来已经过去了一些时间，请参阅更多最新的安装/卸载说明和＆以及最新的gulp 4教程）。
如果您仅看到错误（并且根本没有显示“ It's work！”），则可能是gulp 4未正确安装，或者gulp 3未正确删除，您应该同时卸载gulp 3和gulp 4，然后重新安装gulp 4.注意：如果您尝试了各种来自各种来源的各种安装说明，则特别有可能发生这种情况。

如果有效，则：


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


gulp 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')
));

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

您可能还会注意到，我添加了一个监视任务，其中包含：
gulp.series('sass', gulp.parallel('watch:styles'))
这样一来，您将来就可以添加其他 watch:任务。例如 watch:scripts。

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



最后：关于Gulp 4和当前gulp 4构建的一些说明

1.根据显示的gulpfile，这里有一些关于Gulp 4的指针

Gulp 4现在使用：


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.task('example', 
  gulp.series('thisTaskIsRunFirst', 'thisSecond',
    gulp.parallel('theseThird-SameTime-1', 'theseThird-SameTime-2')
));  

2.并快速修复当前的gulp 4版本

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

    // ---------------------------------------------- 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示例：

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

为了使用gulp手表，我不得不提出解决方案。这样做很好，如果愿意的话，还可以提供执行其他一些任务的其他好处。

完成编写后，我将返回并提供Gulp 4的一些教程链接。