javascript - gulp file babelify task -
i'm kind of lost trying use babelify can use in project es6. should use in scrips-app part. can me? how can implement it? because in examples find on internet, there different implementations.
gulpfile.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 html components. */ gulp.task('compile-jade', () => { return gulp .src(`${config.appfolder }**/*.jade`) .pipe(plugs.jade()) .pipe(plugs.htmlmin()) .pipe(gulp.dest(config.appfolder)); }); /** * compiling sass 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 read files (will speed things), we're after 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 task should add 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; };
this setup babel use babel-preset-es2015 package, , use below task in gulpfile. here boiler plate gulp setup may helpful 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" }
Comments
Post a Comment