zoukankan      html  css  js  c++  java
  • gulp+Babel 搭建ES6环境

    Gulp是什么?

    Gulp是一个工作流的构建系统,开发者可以使用它在网站开发过程中自动执行常见任务。Gulp是基于Node.js构建的,因此Gulp源文件和你用来定义任务的Gulp文件都被写进了JavaScript(或者CoffeeScript)里。前端开发工程师还可以用自己熟悉的语言来编写任务去lint JavaScript和CSS、解析模板以及在文件变动时编译LESS文件(当然这些只是一小部分例子)。

    Gulp本身虽然不能完成很多任务,但它有大量插件可用,开发者可以访问插件页面或者在npm搜索gulpplugin就能看到。例如,有些插件可以用来执行JSHint编译CoffeeScript执行Mocha测试,甚至更新版本号

    对比其他构建工具,比如Grunt,以及最近流行的Broccoli,我相信Gulp会更胜一筹(请看后面的”Why Gulp?”部分),同时我汇总了一个使用Javascript编写的构建工具清单,可供大家参考。

    Gulp是一个可以在GitHub上找到的开源项目。

    Gulp优势:

    Gulp 相比于 Grunt 有很多优点,比较直观的:就是学习曲线比较平滑。比Grunt速度更快、配置更少。

    1. 新建gulpfile.js

    2. 安装插件到package.json生成依赖

    熟悉一下Gulp:

    gulp.task(name[, deps], fn) 定义任务  name:任务名称 deps:依赖任务名称 fn:回调函数

    gulp.src(globs[, options]) 执行任务处理的文件  globs:处理的文件路径(字符串或者字符串数组)
    gulp.dest(path[, options]) 处理完后文件生成路径
     
    npm每安装一个模块,都会在node_modules里生成一个文件夹,可以访问文件夹查看README.md阅读和学习使用方式。
     
    一个工程化前端项目demo的目录:
     
     
    gulpfile.js
    // 导入工具包('node_modules'里对应模块)
    var gulp = require('gulp'), // 本地安装gulp所用到的地方
        less = require('gulp-less');
    
    // 定义一个testLess任务(自定义任务名称)
    gulp.task('testLess', function () {
        // 该任务针对的文件
        gulp.src('src/less/index.less')
            .pipe(less()) // 该任务调用的模块
            .pipe(gulp.dest('src/css')); // 将会在src/css下生成index.css
    });
    
    // 定义默认任务
    gulp.task('default', ['testLess']);
     
    执行编译Gulp:
    当执行gulp defaultgulp将会调用default任务里的所有任务[‘testLess’,’elseTask’]。
    gulp testLess(任务名称) //编译less
     
    右击gulpfile.js,查看当前运行的gulp任务
     
    右击更新任务
     
     

    gulp+Babel 搭建ES6环境

    gulpfile.js文件写入:

    var gulp = require('gulp'),
        plumber = require('gulp-plumber'),
        babel = require('gulp-babel');
    
    
    /* es6 */
    gulp.task('es6', function() {
    
        return gulp.src('src/es6js/*.js')
            .pipe(plumber())
            .pipe(babel({
                presets: ['es2015']
            }))
            .pipe(gulp.dest('dist/ztimages/'));
    });

    命令行执行:

    gulp es6

     
     
     
  • 相关阅读:
    哈希表
    跳表
    哈夫曼之谜
    选择树、判定树和查找树

    将gbk字符串转换成utf-8,存储到注册表中后,再次从注册表读取转换成gbk,有问题!!!
    函数内部还是不要使用 strtok()
    没想到: System.out.println(n1 == f1 ? n1 : f1);
    在不同DPI屏幕环境下,让图标显示的尺寸保持不变,使用 LoadImage() 加载图标
    在多线程中显示模态窗口,出现异常现象
  • 原文地址:https://www.cnblogs.com/lqcdsns/p/6128408.html
Copyright © 2011-2022 走看看