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构建的一些注释
  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是否有效:

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

   gulp

   • 如果您看到:It's working!在您的终端中,您就知道gulp 4已正确安装.
   • 如果你看到"它正在工作!" 但也有一些错误,那么你需要解决这些问题,但问题应该在你的gulpfile.js文件中.(另请参阅更新的安装/卸载说明&&最近的gulp 4教程,如果已经过了一段时间已经过去了).
   • 如果您只是看到错误(并且"它正在工作!"根本没有出现),那么很可能没有正确安装gulp 4,或者gulp 3未正确删除,您应该卸下gulp 3和4并重新安装gulp 4. 注意:这是特别容易,如果你已经尝试了一堆各种来自各种来源的安装说明.

2. 如果有效,那么:

   • 让我们备份你之前为你创建的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任务留在gulpfile中,以便显示gulp.series和gulp.parallel工作.我在下面的最后一节中简要介绍了它们.没有必要也可以删除.

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

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

最后:关于Gulp 4和当前gulp 4构建的一些注释

1.根据你显示的gulp文件,这里有一些关于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'而不得不使用手表任务gulp.series('sass').
我说大概是一个错误,就像我自己学习gulp 4一样,其他人一直在使用传统的监视任务格式和他们的4个例子:

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

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

一旦我完成编写,我会回来为Gulp 4提供一些教程链接.