gulp-babel 不产生任何输出文件或不能正常工作
gulp-babel don't produce any output file or doesn't work properly
我正在开发一个 JS 库,我想将用 ES6 编写的所有 javascript 代码转换为 ES5 标准,以获得当前浏览器的更多支持。
问题是我想在 Gulp 任务中使用 Babel,所以我安装了所有这些 NPM 包 [package.json
]:
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"babel-cli": "^6.26.0",
"gulp": "^3.9.1",
"gulp-babel": "^8.0.0",
"gulp-concat": "^2.6.1",
"gulp-sourcemaps": "^2.6.4",
"gulp-terser": "^1.1.5"
}
接下来我的 .babelrc
文件有以下内容:
{
"presets": ["env"]
}
而gulpfile.js
的写法如下:
const gulp = require('gulp');
const sourcemaps = require('gulp-sourcemaps');
const babel = require('gulp-babel');
const concat = require('gulp-concat');
const terser = require('gulp-terser');
gulp.task('minify', function () {
return gulp.src('src/app/classes/*.js')
.pipe(sourcemaps.init())
.pipe(babel()) // I do not pass preset, because .babelrc do exist
.pipe(concat('output.js'))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('build/js'))
});
gulp.task('default', ['minify']);
问题是当我在项目根目录上执行 gulp
命令时,它没有生成输出文件。控制台显示执行成功,但 build/js
目录中没有任何内容,项目的另一个目录中也没有任何内容。
#user1:/project-route$> gulp
[17:36:54] Using gulpfile /project-route/gulpfile.js
[17:36:54] Starting 'minify'...
我也试过没有 sourcemaps
功能,结果是一样的,没有!!!。
出于一个奇怪的原因,当我在终端 babel -V
中执行时,结果是:
#user1:/project-route$> gulp
6.26.0 (babel-core 6.26.3)
这与我安装的版本不同(我记得):
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
所以,我卸载了所有这些依赖项:
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"gulp-babel": "^8.0.0",
我安装了这个来代替:
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"gulp-babel": "^7.0.1",
现在所有功能都可用了!!!
当然是根据gulp-babel插件的README.md上的这个说明来解释的,这件事让我很头疼:
Install guide (gulp-babel on GitHub)
Install
Install gulp-babel
if you want to get the pre-release of the next
version of gulp-babel
.
# Babel 7
$ npm install --save-dev gulp-babel @babel/core @babel/preset-env
# Babel 6
$ npm install --save-dev gulp-babel@7 babel-core babel-preset-env
我正在开发一个 JS 库,我想将用 ES6 编写的所有 javascript 代码转换为 ES5 标准,以获得当前浏览器的更多支持。
问题是我想在 Gulp 任务中使用 Babel,所以我安装了所有这些 NPM 包 [package.json
]:
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"babel-cli": "^6.26.0",
"gulp": "^3.9.1",
"gulp-babel": "^8.0.0",
"gulp-concat": "^2.6.1",
"gulp-sourcemaps": "^2.6.4",
"gulp-terser": "^1.1.5"
}
接下来我的 .babelrc
文件有以下内容:
{
"presets": ["env"]
}
而gulpfile.js
的写法如下:
const gulp = require('gulp');
const sourcemaps = require('gulp-sourcemaps');
const babel = require('gulp-babel');
const concat = require('gulp-concat');
const terser = require('gulp-terser');
gulp.task('minify', function () {
return gulp.src('src/app/classes/*.js')
.pipe(sourcemaps.init())
.pipe(babel()) // I do not pass preset, because .babelrc do exist
.pipe(concat('output.js'))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('build/js'))
});
gulp.task('default', ['minify']);
问题是当我在项目根目录上执行 gulp
命令时,它没有生成输出文件。控制台显示执行成功,但 build/js
目录中没有任何内容,项目的另一个目录中也没有任何内容。
#user1:/project-route$> gulp
[17:36:54] Using gulpfile /project-route/gulpfile.js
[17:36:54] Starting 'minify'...
我也试过没有 sourcemaps
功能,结果是一样的,没有!!!。
出于一个奇怪的原因,当我在终端 babel -V
中执行时,结果是:
#user1:/project-route$> gulp
6.26.0 (babel-core 6.26.3)
这与我安装的版本不同(我记得):
"@babel/core": "^7.1.2", "@babel/preset-env": "^7.1.0",
所以,我卸载了所有这些依赖项:
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"gulp-babel": "^8.0.0",
我安装了这个来代替:
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"gulp-babel": "^7.0.1",
现在所有功能都可用了!!!
当然是根据gulp-babel插件的README.md上的这个说明来解释的,这件事让我很头疼:
Install guide (gulp-babel on GitHub)
Install
Install
gulp-babel
if you want to get the pre-release of the next version ofgulp-babel
.# Babel 7 $ npm install --save-dev gulp-babel @babel/core @babel/preset-env # Babel 6 $ npm install --save-dev gulp-babel@7 babel-core babel-preset-env