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'));
    });
    
  • 相关阅读:
    好久不见(致win7)
    mysql update
    两个日期相差的天数
    java 文件指针复位
    shell编程: 获得目录下(包括子目录)所有文件名,路径和文件大小
    爬虫(2)
    爬虫
    eclipse 创建dynamic web project不能运行
    JSP Servlet之间交换数据
    html5视频播放插件
  • 原文地址:https://www.cnblogs.com/ifantastic/p/6504470.html
Copyright © 2011-2022 走看看