信号异步完成与Gulp, Babel和config.yml
Signal async completion with Gulp, Babel and config.yml
当前项目处理babel和gulp的任务，并加载一个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));
}
在单一视图中，这个文件没有问题，但是，当执行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基础模板中取的，它工作得很好，所以，我们认为它必须工作得很好，但不是。
我不明白为什么我有这个问题，因为所有任务都在series功能，sass任务工作正常，编译所有scss文件，javascript任务加入main.js和libraries.js文件中的所有js脚本，所以，我认为这个任务是很好的定义，但是，其他任务发生了什么?
从我已经链接的另一个答案:
由于你的任务可能包含异步代码，你必须在任务完成执行时通知Gulp。
在Gulp 3。X你可以不用做这个。Gulp只是假设你的任务是同步的，只要你的任务函数返回，它就已经完成了。杯4。X在这方面似乎更严格。你必须发出任务完成的信号。
有三种方法:
- 返回流
- 返回一个Promise
- 调用回调函数
查看您的代码所基于的Zurb Foundation Template中的sass任务。它使用第一种机制来表示异步完成:返回一个流。
你已经更改了任务。它不再返回流。它返回一个数组。这就是你的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...
}));
}
相关文章：
- 如何在javascript上使用flak-babel进行翻译
- 将webpack和babel与父项目目录中的文件一起使用
- 转换成ES 5使用babel通过吞咽手表不工作
- Babel编译错误:找不到模块核心js/library/fn/get迭代器
- What does requirejs.config() do?
- babel with sub js files
- Babel/Mocha:Mocha已全局安装，但未定义describe(）
- 使用babel，我如何将一些代码附加到每个文件的顶部
- 可以't让browserfy使用babel-plugin-transform类属性
- 使用systemJS的相对动态加载，使用ES6/Babel语法
- 正在导出带有ES6(Babel）的类
- 试图将类导出为模块ES6-babel
- 和babel一起哼哼，浏览
- 运行babel节点时出错
- 从Middleman中的Javascript访问config.rb
- ES6to5, ES6 Module Transpiler and Babel
- require('babel/register'）不'不起作用
- ｛React jsx babel es6 webpack｝如何在渲染中进行注释(return(//||/**/））
- webpack config for js with ng-annotate-loader & babel-lo
- 信号异步完成与Gulp, Babel和config.yml
