[ES6] 02. Traceur compiler and Grunt

There are two ways to compiler the ES6 fils to Javascript file.

One:

traceur --out build/app.js --script js/app.js --experimental

Two:

Using grunt.

Install:


npm install -g traceur
npm install grunt-contrib-watch
npm install grunt-traceur-latest

GruntFile:

module.exports = function(grunt){
    grunt.initConfig({
        traceur: {
            options: {
                experimental:true
            },
            custom: {
                files:{
                    ‘build/app.js‘: "js/**/*.js"
                }
            }
        },

        watch: {
            files:"js/**/*.js",
            tasks: "traceur"
        }
    });

    grunt.loadNpmTasks(‘grunt-traceur-latest‘);
    grunt.loadNpmTasks(‘grunt-contrib-watch‘);
}
时间: 2024-10-01 11:23:30

[ES6] 02. Traceur compiler and Grunt的相关文章

VS2015 VNext学习笔记02:Bower和Grunt

1.概述 (首先声明本人英语水平有限,专业术语也不好恰当翻译,所以有些单词还是不要翻译为好吧) Bower:一个"web包管理",允许您安装和还原客户端软件包,包含 JavaScript 和 CSS 库.对于服务器端库像 MVC 6 框架,仍将使用 NuGet 程序包管理器.Grunt:基于 JS 的task runners.它是一个应用程序,自动化常规开发任务.ASP.NET 5.0 项目模板可以使用它. NPM:节点程序包管理器,Bower和Grunt要使用到它. 2.项目 3.目

WebStorm中使用ES6的几种方式

本篇总结几种在WebStorm下使用ES6的方式. 首先要选择Javascript的版本.依次点击"File","Settings","Languages & Frameworks","Javascript",在"Javascript Language Version"中选择"ECMAScript6". 创建一个名称为calc.js的文件. class Calc{ constru

Learning JavaScript Design Patterns -- A book by Addy Osmani

Learning JavaScript Design Patterns A book by Addy Osmani Volume 1.6.2 Tweet Copyright © Addy Osmani 2015. Learning JavaScript Design Patterns is released under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 unported license. It

JavaScript资源大全

目录 前端MVC 框架和库 包管理器 加载器 打包工具 测试框架 框架 断言 覆盖率 运行器 QA 工具 基于 Node 的 CMS 框架 模板引擎 数据可视化 编辑器 UI 输入 日历 选择 文件上传 其它 提示 模态框和弹出框 滚动 菜单 表格/栅格 框架 手势 地图 视频/音频 动画 图片处理 ECMAScript 6 软件开发工具包(SDK) 利器 前端MVC 框架和库 angular.js:为网络应用增强 HTML.官网 aurelia:一个适用于移动设备.桌面电脑和 web 的客户端

JavaScript 资源大全中文版

包管理器 管理着 javascript 库,并提供读取和打包它们的工具. npm:npm 是 javascript 的包管理器.官网 Bower:一个 web 应用的包管理器.官网 component:能构建更好 web 应用的客户端包管理器.官网 spm:全新的静态包管理器.官网 jam:一个专注于浏览器端和兼容 RequireJS 的包管理器.官网 jspm:流畅的浏览器包管理器.官网 Ender:没有库文件的程序库.官网 volo:以项目模板.添加依赖项与自动化生成的方式创建前端项目.官网

Gulp思维——Gulp高级技巧

本文翻译自Getting gulpy -- Advanced tips for using gulp.js 感受过gulp.js带来的兴奋过后,你需要的不仅仅是它的光鲜,而是切切实实的实例.这篇文章讨论了一些使用gulp.js时常踩的坑,以及一些更加高级和定制化的插件和流的使用技巧. 基本任务 gulp的基本设置拥有非常友好的语法,让你能够非常方便的对文件进行转换: gulp.task('scripts', function() { return gulp.src('./src/**/*.js'

JavaScript资源大全中文版(Awesome最新版)

JavaScript资源大全中文版(Awesome最新版) 目录 前端MVC框架与库 Package Managers Loaders Bundlers Testing Frameworks QA Tools QA工具 Node-Powered CMS Frameworks 节点供电的CMS框架 Templating Engines 模板发动机 Articles and Posts 文章和帖子 Data Visualization 数据可视化 Timeline 时间线 Spreadsheet 电

javascript功能插件大集合,写前端的亲们记得收藏

导读:GitHub 上有一个 Awesome – XXX 系列的资源整理.awesome-javascript 是 sorrycc 发起维护的 JS 资源列表,内容包括:包管理器.加载器.测试框架.运行器.QA.MVC框架和库.模板引擎.数据可视化.时间轴.编辑器等等. 伯乐在线已在 GitHub 上发起「JavaScript 资源大全中文版」的整理.欢迎扩散.欢迎加入. https://github.com/jobbole/awesome-javascript-cn js包下载地址:http:

[转]Gulp思维 —— Gulp高级技巧

感受过gulp.js带来的兴奋过后,你需要的不仅仅是它的光鲜,而是切切实实的实例.这篇文章讨论了一些使用gulp.js时常踩的坑,以及一些更加高级和定制化的插件和流的使用技巧. 基本任务 gulp的基本设置拥有非常友好的语法,让你能够非常方便的对文件进行转换: gulp.task('scripts', function() { return gulp.src('./src/**/*.js') .pipe(uglify()) .pipe(concat('all.min.js')) .pipe(gu