gulp 文件 babelify 任务

NoHoney_k1ll

我在尝试使用 babelify 时有点迷茫,所以我可以在我的项目 ES6 中使用。我应该在 scrips-app 部分使用它。谁能帮我?我该如何实施?因为在我在互联网上找到的所有示例中,都有不同的实现。

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 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'));
});

配置文件

'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;
};
mjr_river

这是我对 Babel 的设置我使用 babel-preset-es2015 包,并在我的 gulpfile 中使用以下任务。这是一个样板 gulp 设置,也可能有用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"
  }

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Gulp任务删除空文件

来自分类Dev

加载文件后运行gulp任务

来自分类Dev

如何测试Gulp任务

来自分类Dev

gulp任务完成所有文件后运行代码

来自分类Dev

Gulp任务运行缓慢

来自分类Dev

Gulp:如何创建可编译多个SASS文件的任务?

来自分类Dev

Gulp文件运行任务并通知两次

来自分类Dev

如何在Gulp任务中分割文件

来自分类Dev

为什么我的gulp任务停止生成我的CSS文件?

来自分类Dev

如何使用gulp任务排除包含文件的目录

来自分类Dev

Gulp,Reactify和Babelify无法一起转换

来自分类Dev

Gulp Favicon任务

来自分类Dev

角文件上的Gulp任务中断

来自分类Dev

在gulp任务中删除文件

来自分类Dev

如何在Gulp.js任务中间添加CSS文件?

来自分类Dev

Gulp文件任务执行顺序

来自分类Dev

使用Babelify和Browserify在Gulp中添加babel / polyfill

来自分类Dev

在多个目录中将文件Babelify到位

来自分类Dev

Gulp任务在生成输出文件之前完成

来自分类Dev

即使文件未更改也如何执行gulp任务

来自分类Dev

Gulp-js仅将保存的文件传递给任务

来自分类Dev

Gulp任务无法访问karma.conf.js文件

来自分类Dev

在同级文件夹中运行gulp任务

来自分类Dev

Gulp / Babelify es6

来自分类Dev

使用Babelify和Browserify在Gulp中添加babel / polyfill

来自分类Dev

在gulp-inject索引任务上对文件进行排序

来自分类Dev

Gulp任务仅编译已更改的文件

来自分类Dev

Gulp复制文件不适用于默认任务

来自分类Dev

我有一个 GULP 的任务文件,用于使用 babelify 用 JSX 代码编译 js 文件,但不起作用