如果你遇到了错误,我们可能需要更多信息。但是,如果问题仅在于让gulpfile.js正常工作,那么下面的内容应该可以解决问题。
如果你已经找到解决方法,那太好了。但是对于其他遇到这个问题的人,我将提供一些技巧,然后这个方法应该可以解决问题。
目录
- 第一步:卸载gulp 3并安装gulp 4
- 第二步:测试gulp 4是否有效
- 我将为您提供最基本的版本,如果可行,则可以进行下一步操作。
- 第三步:最终的gulpfile版本
- 尝试我根据您向我展示的文件需求所提供的第二个版本。
- 最后:有关Gulp 4和当前gulp 4版本的一些注意事项
- 根据您展示的gulpfile,以下是关于Gulp 4的一些要点,
- 以及当前gulp 4构建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(...))
路径。
var gulp = require('gulp'),
sass = require('gulp-sass');
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"))
});
gulp.task('default', function(){
console.log("It's working!");
});
让我们找出gulp 4是否正常工作:
在终端中运行默认的gulp任务:
gulp
- 如果你在终端中看到:
It's working!
,那么说明gulp 4已经正确安装。
- 如果你看到“ It's working! ”但也有一些错误,那么你需要解决这些问题,但问题应该与您的gulpfile.js文件有关。(如果发布后一段时间已过,请参阅更多最近的安装/卸载说明和更多最近的gulp 4教程)。
- 如果只看到错误(而没有出现“ It's working! ”),则很可能是gulp 4未正确安装,或者gulp 3未正确删除,你应该卸载gulp 3和4并重新安装gulp 4。 注意: 如果你尝试了许多不同来源的安装说明,则特别容易发生这种情况。
如果成功了,那么:
- 让我们备份Sass为您以前创建的CSS文件(如果已存在项目),然后删除这些CSS文件,然后
- 接下来在终端中尝试运行sass任务:
gulp sass
如果它起作用了(创建了这些文件),那么一切正常,请继续查看下面的其他片段。
第三步:最终gulpfile版本
这是根据所示gulpfile.js的需求解决方案:
var gulp = require('gulp'),
sass = require('gulp-sass');
var paths = {
sass: {
src: './furniture/sass/**/*.{scss,sass}',
dest: './furniture/css',
opts: {
}
}
};
gulp.task('sass', function () {
return gulp.src(paths.sass.src)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(paths.sass.dest))
});
gulp.task('message', function(){
console.log('It works!!');
});
gulp.task('watch:styles', function () {
gulp.watch(paths.sass.src, gulp.series('sass'));
});
gulp.task('watch', gulp.series('sass',
gulp.parallel('watch:styles')
));
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构建的一些说明
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')
series
和parallel
可以一起使用来更好地控制任务的流程,例如:
gulp.task('example',
gulp.series('thisTaskIsRunFirst', 'thisSecond',
gulp.parallel('theseThird-SameTime-1', 'theseThird-SameTime-2')
));
2. Gulp 4构建的快速修复方法
在这些示例中,您会注意到我在watch:styles
任务中使用了gulp.series
:
gulp.task('watch:styles', function () {
gulp.watch(paths.sass, gulp.series('sass'));
});
这可能是由于gulp 4的watch方法中存在的一个bug导致的。我假设是这种情况,因为我无法仅使用'sass'
来使监视任务正常工作,而必须使用gulp.series('sass')
。
我说“可能是”一个bug,因为在学习gulp 4时,其他人在他们的gulp 4示例中已经使用了传统的监视任务格式:
gulp.task('watch', function(){
gulp.watch('path/of/files/to/watch/**/*.scss', 'sass');
});
我不得不想出这个解决方法才能使用gulp watch。这没问题,并且如果您希望在此之后执行其他任务,也可以提供其他好处。
一旦我完成它们的编写,我将回来提供有关Gulp 4的一些教程链接。