zoukankan      html  css  js  c++  java
  • 使用 ES2015 编写 Gulp 构建

    Gulp 自 v3.9.0 版本增加对 Babel 的支持,也就是说可以使用 ES2015 语法来编写 gulp 任务。

    检查 gulp 版本

    $ gulp -v
    

    确保 gulp-cli 和 gulp 都是 v3.9.0 以上版本。

    $ npm install gulp && npm install gulp -g
    

    安装 babel

    安装 babel-core 和 babel-preset-es2015。

    $ npm install babel-core babel-preset-es2015 --save-dev
    

    新建 .babelrc 写入以下内容:

    {
        "presets": ["es2015"]
    }
    

    重命名配置文件

    将配置文件 gulpfile.js 重命名为 gulpfile.babel.js

    之后便可以使用 ES2015 语法编写 gulpfile.babel.js 了。

    示例

    'use strict';
    
    import gulp from 'gulp';
    import sass from 'gulp-sass';
    import autoprefixer from 'gulp-autoprefixer';
    import sourcemaps from 'gulp-sourcemaps';
    
    const dirs = {
      src: 'src',
      dest: 'build'
    };
    
    const sassPaths = {
      src: `${dirs.src}/app.scss`,
      dest: `${dirs.dest}/styles/`
    };
    
    gulp.task('styles', () => {
      return gulp.src(paths.src)
        .pipe(sourcemaps.init())
        .pipe(sass.sync().on('error', plugins.sass.logError))
        .pipe(autoprefixer())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(paths.dest));
    });
    
    

    使用 gulp-babel 将 ES2015 文件转换为 ES5

    安装 gulp-babelnpm install gulp-babel --save-babel

    示例:

    import gulp from 'gulp';
    import babel from 'gulp-babel';
    
    gulp.task('default', () => {
        return gulp.src('./src/*.js', {base: 'src'})
            .pipe(babel())
            .pipe(gulp.dest('build'));
    });
    
  • 相关阅读:
    [转]SVN服务器搭建和使用(二)
    [转]SVN服务器搭建和使用(一)
    BZOJ 2049 Sdoi2008 Cave 洞穴勘测
    BZOJ 1589 Usaco2008 Dec Trick or Treat on the Farm 采集糖果
    BZOJ 2796 POI2012 Fibonacci Representation
    BZOJ 2115 Wc2011 Xor
    BZOJ 3105 CQOI2013 新Nim游戏
    BZOJ 2460 Beijing2011 元素
    BZOJ 3687 简单题
    BZOJ 1068 SCOI2008 压缩
  • 原文地址:https://www.cnblogs.com/ifantastic/p/6504470.html
Copyright © 2011-2022 走看看