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'));
    });
    
  • 相关阅读:
    css3(持续更新...)
    em,rem,px之间的转换
    document.compatMode属性
    CSS hack(CSS浏览器兼容)
    JavaScript正则表达式
    Django数据库sqlite转mysql
    Markdown 使用指南
    centos7下docker 部署javaweb
    CMD命令大全
    {dockerUI}在服务器上直接安装shipyard/shipyard
  • 原文地址:https://www.cnblogs.com/ifantastic/p/6504470.html
Copyright © 2011-2022 走看看