Automated testing is a great way to improve the quality and speed throughout the development of your code. In this article I’ll explain some of the benefits of automated testing, show you how to add testing to an existing project, write tests, and then write code to make the tests pass. This article is written with the assumption you are familiar with Node.js and Gulp.
Tag Archives: gulp
I covered how ES6 can be used today to write Angular 1.x applications in one of my previous articles. In this article I used Traceur’s on-the-fly transpiler to run the application. Although it works, it is always better to transpile beforehand and reduce the amount of work to be done in the browser. In this article, we will see how the same sample application can be transpiled to ES5 and the modules into either CommonJS or, AMD using Babel to make it run on today’s browsers. Though the sample is based on Angular, the techniques of transpilation can be used with any valid ES6 code.
As ever, you can find the code to accompany this article on our GitHub repo.
Front-end build and workflow tools are available in abundance: Grunt, Gulp, Broccoli, and Jake to name but a few. These tools can automate almost anything you find yourself doing repeatedly in a project, from minifying and concatenating source files, to running tests or compiling code. But the question is, do you need them? Do you really want to introduce an additional dependency to your project? The answer is “No!”. There is a free alternative that can do the majority of these tasks for you and it comes bundled withNode.js. Of course I’m talking about npm.
In this article we’ll discuss what npm is capable of as a build tool. If you’d like a quick primer on npm before starting, please refer to our beginner’s guide to npm. If you’d like to follow along, you can find the code used in this article on GitHub.
Gulp is a powerful task runner, that when used correctly, can vastly improve your workflow, as well as producing sites that would otherwise be bloated, take a long time to build, and be stuck with old technologies. Before you start using Gulp, take note of the Google Page Speed Insights score for your site. Compare this to the value after you have implemented Gulp, and you will be amazed by what a few simple tasks can achieve.
I would like to minified the .js files of the bower packages in my project. Usually, gulp will read the source files and the pipe them into new files but this time i would like to overwrite the original file without creating a .min.js file. Example: The above task will read those .js files […]
- Babel – Turn ES6+ code into vanilla ES5 with no runtime
- Traceur compiler – ES6 features > ES5. Includes classes, generators, promises, destructuring patterns, default parameters & more.
- es6ify – Traceur compiler wrapped as a Browserify v2 transform
- babelify – Babel transpiler wrapped as a Browserify transform
- es6-transpiler – ES6 > ES5. Includes classes, destructuring, default parameters, spread
- Square’s es6-module-transpiler – ES6 modules to AMD or CJS
- Facebook’s regenerator – transform ES6 yield/generator functions to ES5
- Facebook’s jstransform – A simple utility for pluggable JS syntax transforms. Comes with a small set of ES6 -> ES5 transforms
- defs – ES6 block-scoped const and let variables to ES3 vars
- es6_module_transpiler-rails – ES6 Modules in the Rails Asset Pipeline
- Some Sweet.js macros that compile from ES6 to ES5
- Bitovi’s transpile – Converts ES6 to AMD, CJS, and StealJS.
- regexpu — Transform Unicode-aware ES6 regular expressions to ES5
- Babel: grunt-babel – Turn ES6+ code into vanilla ES5 with no runtime
- Traceur: grunt-traceur ES6 > ES5 transpilation, grunt-traceur-build
- ES6 Module Transpiler: grunt-es6-module-transpiler
- Regenerator: grunt-regenerator – ES6 generator functions to ES5
- grunt-microlib – tools for libs using ES6 module transpiler (sample Gruntfile)
- grunt-defs – ES6 block scoped const and let variables, to ES3
- es6-transpiler: grunt-es6-transpiler – ES6 → ES5
- Babel: gulp-babel
- Traceur: gulp-traceur
- Regenerator: gulp-regenerator
- ES6 Module Transpiler: gulp-es6-module-transpiler
- es6-transpiler: gulp-es6-transpiler – ES6 → ES5
- es6-jstransform: gulp-jstransform – ES6 → ES5 using FB’s jstransform
- regexpu: gulp-regexpu
- Babel: broccoli-babel-transpiler
- Traceur: broccoli-traceur
- Regenerator: broccoli-regenerator
- ES6 Transpiler: broccoli-transpiler
- ES6 Module Transpiler: broccoli-es6-module-transpiler
- ES6 fat arrow transpiler: broccoli-es6-arrow
- Babel: duo-babel
- Babel: babel-connect
- Babel: babel-jest
- Scratch JS – A Chrome/Opera DevTools extension to run ES6 on a page with either Babel or Traceur
- Mocha Traceur – A simple plugin for Mocha to pass JS files through the Traceur compiler
- ES6 Module Loader polyfill (compat with latest spec and Traceur)
- js-loaders – Mozilla’s spec-compliant loader prototype
- JSPM – ES6, AMD, CJS module loading/package management
- Module Loader for webpack
- beck.js – toolkit for ES6 Module Loader pipelines, shim for legacy environments
- es6-boilerplate – Tooling to allow the community to use es6 now via traceur in conjunction with amd and browser global modules, with source maps, concatenation, minification, compression, and unit testing in real browsers.
- generator-node-esnext – Yeoman generator for Traceur apps
- generator-es6-babel – Yeoman generator for Babel apps
- grunt-init-es6 – scaffold node modules with unit tests, authored in ES6
- Loom generators with ES6 ember modules
- Brunch plugin for ES6 module transpilation
- core-js – Modular and compact polyfills for ES6 including Symbols, Map, Set, Iterators, Promises, setImmediate, Array generics, etc. The standard library used by Babel.
- es6-shim – almost all new ES6 methods — from Map, Set, String, Array, Object, Object.is and more.
- WeakMap, Map, Set, HashMap – ES6 Collections
- Polymer’s WeakMap shim
- es6-promise – polyfill for Promises matching the ES6 API
- ES6 Map Shim – destructive shim that follows the latest specification as closely as possible.
- ES6 shim
- ES6 Symbol polyfill
- ES6 Map, Set, WeakMap
- harmony-reflect – ES6 reflection module (contains the Proxy API)
- ES5 based shims in pure CJS style – Array, Object, Number, Math and String functions/methods, plus Map, Set, Symbol and WeakMap objects
- ES6 syntax highlighting for Sublime Text and TextMate
- ES6 syntax support in WebStorm and PhpStorm, compilation to ES5 with Traceur file watcher
- DocPad plugin for Traceur
- Esprima Harmony branch – Experimental branch of the Esprima parser which can parse ES6 features to SpiderMonkey AST format.
- esparse – ES6 parser written in ES6.
- Traceur compiler also has built-in parser available under
- ES.next showcase – real-world usage examples of ES6 features
- looper – static analysis tools for ES6
- es-dependency-graph and grunt-es-dependency-graph – Generate a list of imports and exports from ES6 module files, useful for preloading, bundling, etc.
- es6-import-validate and grunt-es6-import-validate – validate matching named/default import statements in ES6 modules.
- let-er – transpiles let-block block-scoping (not accepted into ES6) into either ES3 or ES6
- Paws on ES6 – Minimalist examples of ES6 functionalities.
- ES6 on node – How to use ES6 features in node.js.
- es6-translate – Uses the ES6 loader hooks to load (node flavored) commonjs packages in ES6.
- babel-node – Run node cli with ES6 transpiling using Babel.
- ES6 Lab setup – A simple setup for transpiling ES6 to ES5 using
- TypeScript – A superset of ECMAScript with strict typing that aims to align with ES6
Page reload doesn’t work after enabled the html5mode. We have to rewrite the url and it could be easily done by using a middleware for the connect server. gulpfile.js Done =) Reference: GitHub – bripkens/connect-history-api-fallback