gulp file babelify task

Question

尝试使用babelify时我有点迷茫，这样我就可以在我的项目中使用ES6。 我应该在 scrips 应用程序部分使用它。谁能帮我？我该如何实现它？因为在我在互联网上找到的所有示例中，都有不同的实现。

古尔普文件.js

const config = require('./gulp.config.js')();
const gulp = require('gulp');
const gulpLoadPlugins = require('gulp-load-plugins');
const plugs = gulpLoadPlugins();
const bs = require('browser-sync');
const env = process.env.NODE_ENV || 'local';
const merge = require('merge-stream');
const imagemin = require('gulp-imagemin');
const browserify = require('browserify');
const babelify = require('babelify');
const clean = require('gulp-clean');
const eventStream = require('event-stream');
const optimize = false;

if (env === 'staging' || env === 'production') {
const optimize = true;
}
/**
* Compiling jade into html for components.
*/
gulp.task('compile-jade', () => {

return gulp
.src(`${config.appFolder }**/*.jade`)
.pipe(plugs.jade())
.pipe(plugs.htmlmin())
.pipe(gulp.dest(config.appFolder));
});

/**
* Compiling sass into css.
*/
gulp.task('styles-app', () => {
return gulp
.src(config.mainscss)
.pipe(plugs.sass())
.pipe(plugs.rename(`${config.projectName}.css`))
.pipe(plugs.if(optimize, plugs.combineMq()))
.pipe(plugs.if(optimize, plugs.csso()))
.pipe(plugs.if(optimize, plugs.rev()))
.pipe(gulp.dest(config.build));
});

/**
* Concat vendor js files.
*/
gulp.task('scripts-lib', () => {
const mainBowerFiles = require('main-bower-files');
return gulp
.src(mainBowerFiles('**/*.js'))
//.pipe(plugs.debug())
.pipe(plugs.concat(`${config.projectName }-lib.js`))
.pipe(plugs.if(optimize, plugs.uglify()))
.pipe(plugs.if(optimize, plugs.stripDebug()))
.pipe(plugs.if(optimize, plugs.rename({
extname: '.min.js'
})))
.pipe(gulp.dest(config.build));
});
gulp.task('scripts-app', ['compile-jade'], () => {
var scriptsStream = gulp.src(config.appFolder + '**/*.js'),
templateCacheStream = gulp.src(config.appFolder + '**/*.html')
.pipe(plugs.angularTemplatecache(config.templateCache.file, config.templateCache.options));
console.log(plugs.order(config.jsOrder));
return eventStream.merge(templateCacheStream, scriptsStream)
.pipe(plugs.order(config.jsOrder))
.pipe(plugs.concat(`${config.projectName}.js`))
.pipe(plugs.if(optimize, plugs.uglify()))
// .pipe(plugs.if(optimize, plugs.stripDebug()))
// .pipe(plugs.if(optimize, plugs.rename({extname: '.min.js'})))
.pipe(gulp.dest(config.build));
});
gulp.task('fonts', function () {
return gulp.src('./src/client/fonts/**/*.{eot,svg,ttf,woff,woff2}')
.pipe(gulp.dest(`${config.build}/fonts`));
});
gulp.task('images', () =>
gulp.src('src/client/images/*')
.pipe(imagemin())
.pipe(gulp.dest(`${config.build}/images`))
);
gulp.task('clean', function () {
return gulp.src(`${config.build}`, {read: false})
.pipe(clean());
});
gulp.task('inject', ['bundle'], () => {
const series = require('stream-series');
// It's not necessary to read the files (will speed up things), we're only after their paths:
const scriptLib = gulp.src([`${config.build}*lib*.js`], {
read: false
});
const styleApp = gulp.src([`${config.build}*.css`, `!${config.build}*lib*.css`], {
read: false
});
const scriptApp = gulp.src([`${config.build}*.js`, `!${config.build}*lib*.js`], {
read: false
});
const seriesStreams = series(scriptLib, styleApp, scriptApp);
return gulp.src(`${config.build}index.html`)
.pipe(plugs.inject(seriesStreams, {
addPrefix: '/static',
relative: true
}))
.pipe(gulp.dest(config.build));
});
gulp.task('bundle', ['watch'], () => {
return gulp.src(`${config.index}`)
.pipe(gulp.dest(config.build));
});

gulp.task('default', ['inject', 'build', 'fonts', 'images', 'nodemon', 'watch']);
/**
* Build!!!!
*/
gulp.task('build', ['styles-app', 'scripts-lib', 'scripts-app']);

gulp.task('watch', ['browser-sync'], () => {
gulp.watch(config.files.jade, ['scripts-app']).on('change', bs.reload);
gulp.watch(config.files.js, ['scripts-app']).on('change', bs.reload);
gulp.watch(config.files.sass, ['styles-app']).on('change', bs.reload);
});
gulp.task('browser-sync', ['nodemon'], function () {
bs.init(null, {
proxy: "http://localhost:5000",
files: ["public/**/*.*"],
port: 3000
});
});
gulp.task('nodemon', () => {
plugs.nodemon({
script: './src/server/index.js',
ext: 'js html',
env: {
'DEBUG': 'template:server',
'NODE_ENV': 'development'
}
}).on('start', function (cb) {
if (!started) {
cb();
started = true;
}
})
.on('restart', function () {
console.log('server restarted!')
})
});

module.exports = gulp;

Babelify任务我应该添加到gulpfile中.js

gulp.task('babelify', function () {
return browserify({entries: './app.js', extensions: ['.js'], debug: true})
.transform(babelify)
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('dist'));
});

gulp.config.js

'use strict';
module.exports = function() {
const pkg = require('./package.json');
const server = './server/';
const src = './src/';
const scssfolder = `${src }client/sass/`;
const mainscss = `${scssfolder }styles.sass`;
const build = './build/';
const appFolder = `${src}client/app/`;
const index = `${src }client/index.html`;
const config = {
projectName: pkg.name,
appFolder,
app: `${appFolder }app.module.js`,
scssfolder,
mainscss,
angularRootApp: `${appFolder}core/`,
build,
index,
src,
images: `${src }client/images/`,
fonts: `${scssfolder }fonts/`,
vendorfolder: `${src }client/vendor/`,
templateCache: {
file: 'app.templates.js',
options: {
module: 'hotelsResult',
moduleSystem: "IIFE"
}
},
jsOrder: ['**/app.module.js', '**/*.module.js', '**/*.js'],
files: {
sass: `${src}**/*.sass`,
js: [`${src}**/*.js`, `!${src}**/*.templates.js`],
html: `${src}**/*.html`,
jade: `${src}**/*.jade`
}
};
return config;
};

Answer 1

这是我对 Babel 的设置 我使用 babel-preset-es2015 包，并在我的 gulpfile 中使用以下任务。这是一个样板大口大口的设置，也可能对 https://github.com/markring/gulp_boilerplate 有所帮助。

var babel = require('gulp-babel');
gulp.task('scripts', function () {
	console.log('starting scripts task');
	return gulp.src(SCRIPTS_PATH)
		.pipe(plumber(function (err) {
			console.log('Scripts Task Error');
			console.log(err);
			this.emit('end');
		}))
		.pipe(sourcemaps.init())
		.pipe(babel({
			presets: ['es2015']
		}))
		.pipe(uglify())
		.pipe(concat('scripts.js'))
		.pipe(sourcemaps.write())
		.pipe(gulp.dest(DIST_PATH))
		.pipe(livereload());
});

"devDependencies": {
"babel-preset-es2015": "^6.3.13",
"gulp": "^3.9.0",
"gulp-babel": "^6.1.1"
}