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版本的一些注释
1. 根据您显示的gulp文件，这里有一些关于Gulp 4的指示，
2. 快速修复当前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已正确安装。
- 如果你看到＆＃34;它在工作！＆＃34;但也有一些错误，那么你需要解决这些问题，但问题应该在你的gulpfile.js文件中。（如果已经过了一段时间，请参阅更新的安装/卸载说明以及更新的gulp 4教程。）
- 如果你只看到错误（＆＃34;它正在工作！＆＃34;根本没有出现），那么gulp 4可能没有正确安装，或者gulp 3没有被正确删除，你应该卸下gulp 3和4并重新安装gulp 4. 注意：如果您尝试过各种来源的各种安装说明，这种情况尤其可能。
如果有效，那么：
- 让我们备份您之前为您创建的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')
));

虽然我说这是最终版本，但我已经在gulpfile中留下了可选的message任务，以便在工作中显示gulp.series和gulp.parallel。我在下面的最后一节中简要介绍了它们。没有必要也可以删除。

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

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

最后：关于Gulp 4和当前gulp 4 build

1。根据您显示的gulp文件，这里有一些关于Gulp 4

Gulp 4现在使用：

gulp.series：控制要运行的内容的顺序。它按顺序运行任务直到完成，例如：
gulp.series('task-name-1', 'task-name-2')
＆＃39; gulp.parallel＆＃39;：与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 build

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

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

这可能是因为gulp 4 watch方法中的一个错误。我假设是这种情况，因为我无法通过简单地使用'sass'来完成监视任务，而是必须使用gulp.series('sass')。我大概说这是一个错误，就像我自己学习gulp 4一样，其他人一直在使用传统的监视任务格式和他们的4个例子：

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

为了使用gulp手表，我不得不想出这个工作。这很好，如果你愿意，还可以提供执行其他任务的其他好处。

一旦我完成写作，我会回来为Gulp 4提供一些教程链接。

Gulp 4 - Gulpfile.js设置

1 个答案:

索引