当前项目处理babel和gulp for task并为路径加载yml配置文件。
这是cofing.yml：
PATHS:
# Path to source folder
sources: "jet/static/jet_src"
# Path to dist folder
dist: "jet/static/jet"
# Paths to static assets that aren't images, CSS, or JavaScript
assets:
- "jet/static/jet_src/**/*"
- "!jet/static/jet_src/{img,js,scss,fonts}/**/*"
# Paths to fonts folder
fonts:
- "jet/static/jet_src/fonts/**/*"
- "node_modules/font-awesome/fonts/**/*"
# Paths to Sass libraries, which can then be loaded with @import
sass:
- "jet/static/jet_src/scss"
- "jet/static/jet_src/scss/select2"
- "node_modules/font-awesome/scss/"
- "node_modules/select2/src/scss/"
- "node_modules/perfect-scrollbar/src/scss/"
# Paths to JavaScript libraries, which are compined into one file
javascript:
- "jet/static/jet_src/js/!(main).js"
- "jet/static/jet_src/js/main.js"
- "jet/static/jet_src/js/!(select2.jet).js"
- "jet/static/jet_src/js/select2.jet.js"
libraries:
- "node_modules/jquery/dist/jquery.js"
# - "node_modules/jquery-ui/jquery-ui.js"
- "node_modules/select2/dist/js/select2.full.js"
- "node_modules/perfect-scrollbar/dist/js/perfect-scrollbar.js"
- "node_modules/perfect-scrollbar/dist/js/perfect-scrollbar.jquery.js"
- "node_modules/js-cookie/src/js.cookie.js"
这是gulpfile.babel.js：
'use strict';
import plugins from 'gulp-load-plugins';
import yargs from 'yargs';
import browser from 'browser-sync';
import merge from 'merge-stream';
import gulp from 'gulp';
// import panini from 'panini';
import rimraf from 'rimraf';
// import sherpa from 'style-sherpa';
import yaml from 'js-yaml';
import fs from 'fs';
import path from 'path';
// Themes path
const themesPath = "jet/static/jet_src/scss/themes/";
// Load all Gulp plugins into one variable
const $ = plugins();
// Check for --production flag
const PRODUCTION = !!(yargs.argv.production);
// Load settings from settings.yml
const {COMPATIBILITY, PORT, UNCSS_OPTIONS, PATHS} = loadConfig();
function loadConfig() {
let ymlFile = fs.readFileSync('config.yml', 'utf8');
return yaml.load(ymlFile);
}
function getFolders(dir) {
return fs.readdirSync(dir)
.filter(function (file) {
return fs.statSync(path.join(dir, file)).isDirectory();
});
}
// Build the "dist" folder by running all of the below tasks
gulp.task('build', gulp.series(clean, gulp.parallel(sass, javascript, images, fonts)));
// Build the site, run the server, and watch for file changes
gulp.task('default', gulp.series('build', server, watch));
// Delete the "dist" folder
// This happens every time a build starts
function clean(done) {
rimraf(PATHS.dist, done);
}
// Compile Sass into CSS
// In production, the CSS is compressed
function sass() {
var folders = getFolders(themesPath);
return folders.map(folder => {
gulp.src(path.join(themesPath, folder, '/**/*.scss'))
.pipe($.sourcemaps.init())
.pipe($.sass({
includePaths: PATHS.sass
})
.on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers: COMPATIBILITY
}))
// Comment in the pipe below to run UnCSS in production
.pipe($.if(PRODUCTION, $.uncss(UNCSS_OPTIONS)))
.pipe($.if(PRODUCTION, $.cssnano()))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(PATHS.dist + '/css/themes/' + folder))
.pipe(browser.reload({stream: true}));
});
}
// Combine JavaScript into one file
// In production, the file is minified
function javascript() {
var js = gulp.src(PATHS.javascript)
.pipe($.sourcemaps.init())
.pipe($.babel())
.pipe($.concat('main.js'))
.pipe($.if(PRODUCTION, $.uglify()
.on('error', e => {
console.log(e);
})
))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(PATHS.dist + '/js'));
var libs = gulp.src(PATHS.libraries)
.pipe($.sourcemaps.init())
.pipe($.babel())
.pipe($.concat('libraries.js'))
.pipe($.if(PRODUCTION, $.uglify()
.on('error', e => {
console.log(e);
})
))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(PATHS.dist + '/js'));
return merge(js, libs);
}
// Copy images to the "dist" folder
// In production, the images are compressed
function images() {
return gulp.src(PATHS.sources + '/img/**/*')
.pipe($.if(PRODUCTION, $.imagemin({
progressive: true
})))
.pipe(gulp.dest(PATHS.dist + '/img'));
}
// Copy fonts to the "dist" folder
function fonts() {
return gulp.src(PATHS.fonts)
.pipe(gulp.dest(PATHS.dist + '/fonts'));
}
// Start a server with BrowserSync to preview the site in
function server(done) {
browser.init({
server: PATHS.dist, port: PORT
});
done();
}
// Reload the browser with BrowserSync
function reload(done) {
browser.reload();
done();
}
// Watch for changes to static assets, Sass, and JavaScript
function watch() {
gulp.watch(PATHS.sources + '/scss/**/*.scss', sass);
gulp.watch(PATHS.sources + '/js/**/*.js').on('change', gulp.series(javascript, browser.reload));
gulp.watch(PATHS.sources + '/img/**/*').on('change', gulp.series(images, browser.reload));
gulp.watch(PATHS.sources + '/fonts/**/*').on('change', gulp.series(fonts, browser.reload));
}
在单一视图中，这个文件没有问题，但是，当exute gulp命令我在控制台中出现下一个错误时：
npm start ✓ 1949 10:49:29
> django-jetpack@1.0.0-b start /Users/jose/Proyectos/django-jetpack
> gulp
[10:49:35] Requiring external module babel-register
[10:49:40] Using gulpfile ~/Proyectos/django-jetpack/gulpfile.babel.js
[10:49:40] Starting 'default'...
[10:49:40] Starting 'build'...
[10:49:40] Starting 'clean'...
[10:49:40] Finished 'clean' after 3.23 ms
[10:49:40] Starting 'sass'...
[10:49:40] Starting 'javascript'...
[10:49:40] Starting 'images'...
[10:49:40] Starting 'fonts'...
[10:49:46] Finished 'images' after 5.91 s
[BABEL] Note: The code generator has deoptimised the styling of "/Users/jose/Proyectos/django-jetpack/node_modules/jquery/dist/jquery.js" as it exceeds the max of "100KB".
[BABEL] Note: The code generator has deoptimised the styling of "/Users/jose/Proyectos/django-jetpack/node_modules/select2/dist/js/select2.full.js" as it exceeds the max of "100KB".
[10:49:57] Finished 'javascript' after 16 s
[10:49:57] Finished 'fonts' after 16 s
[10:49:57] The following tasks did not complete: default, build, <parallel>, sass
[10:49:57] Did you forget to signal async completion?
npm已安装的软件包是：
"devDependencies": {
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"babel-register": "^6.9.0",
"browser-sync": "^2.13.0",
"font-awesome": "^4.6.3",
"gulp": "github:gulpjs/gulp#4.0",
"gulp-autoprefixer": "^3.1.0",
"gulp-babel": "^6.1.2",
"gulp-cli": "^1.2.1",
"gulp-concat": "^2.6.0",
"gulp-cssnano": "^2.1.2",
"gulp-extname": "^0.2.2",
"gulp-if": "^2.0.1",
"gulp-imagemin": "^3.0.1",
"gulp-load-plugins": "^1.2.4",
"gulp-sass": "^2.3.2",
"gulp-sourcemaps": "^1.6.0",
"gulp-uglify": "^1.5.3",
"gulp-uncss": "^1.0.5",
"jquery": "^3.0.0",
"js-cookie": "^2.1.2",
"js-yaml": "^3.6.1",
"merge-stream": "^1.0.0",
"node-sass": "^3.8.0",
"perfect-scrollbar": "^0.6.11",
"rimraf": "^2.5.2",
"select2": "^4.0.3",
"susy": "^2.2.12",
"yargs": "^4.7.1"
}
此设置取自Zurb Foundation Template并且工作正常，因此，我们认为必须正常工作，但不是。
我不明白为什么我遇到这个问题，因为所有任务都在series函数中，sass任务正常，编译所有scss文件，javascript任务加入所有js main.js和libraries.js文件中的脚本，所以，我认为这个任务定义得很好，但是，其他任务会发生什么？
答案 0 :(得分：3)
从另一个答案I already linked：
由于您的任务可能包含异步代码，因此您必须在任务执行完毕后发出Gulp信号。
在Gulp 3.x中，你可以在不这样做的情况下离开。 Gulp只会假设您的任务是同步的，并且在任务函数返回后它就会完成。在这方面，Gulp 4.x似乎更加严格。你必须表明任务完成。
您可以通过三种方式实现这一目标：
- 返回一个流。
- 回复承诺。
- 调用回调函数。
查看基于代码的sass task in the Zurb Foundation Template。它使用第一种机制来发出异步完成信号：返回一个流。
你已经改变了这个任务。它不再返回流。它返回一个数组。这就是您sass任务失败的原因。
因此，您需要在sass任务中返回一个流。一种方法是使用merge-stream将不同的流合并为一个流：
var merge = require('merge-stream');
function sass() {
var folders = getFolders(themesPath);
return merge.apply(null, folders.map(folder => {
return gulp.src(path.join(themesPath, folder, '/**/*.scss'))
.pipe($.sourcemaps.init())
//etc...
}));
}