Tag Archives: gulp

Javascript Automated Code Testing


Javascript Automated Code Testing
// CenturyLink Cloud Blog

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.

Transpiling ES6 Modules to AMD & CommonJS Using Babel & Gulp


via Transpiling ES6 Modules to AMD & CommonJS Using Babel & Gulp.

ECMAScript 6 (a.k.a ECMAScript 2015 or ES6), the specification for next version of JavaScript has been approved and browser vendors are hard at work implementing it Unlike the previous versions of ECMAScript, ES6 comes with a huge set of changes to the language to make it a good fit for the scale at which it is used today. Sitepoint has a number of articles covering these features.

Although browsers haven’t implemented all of the features yet, we can already take advantage of ES6 during development and convert it to a version that browser understands before shipping the application.Babel and Traceur are two of the leading transpilers used for this purpose. Microsoft’s typed superset of JavaScript, TypeScript can also be used as an ES6 transpiler.

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.

Give Grunt the Boot! A Guide to Using npm as a Build Tool


via Give Grunt the Boot! A Guide to Using npm as a Build Tool.

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.

Automating optimisations with Gulp


via Automating optimisations with Gulp – SteveEdson.

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.

Gulp – Rewrite source files instead of creating new files


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 […]

http://eureka.ykyuen.info/2015/07/13/gulp-rewrite-source-files-instead-of-creating-new-files/

ECMAScript 6 Tools: An aggregation of tooling for using ES6 today


Transpilers

  • 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

Build-time transpilation

Grunt Tasks

Gulp Plugins

Broccoli Plugins

Brunch Plugins

Webpack plugins

Duo plugins

Connect plugins

Gobble plugins

Jade plugins

Jest plugins

Karma plugins

Sprockets plugins

Browser plugins

  • Scratch JS – A Chrome/Opera DevTools extension to run ES6 on a page with either Babel or Traceur

Mocha plugins

  • Mocha Traceur – A simple plugin for Mocha to pass JS files through the Traceur compiler

Module Loaders

  • 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

Boilerplates

  • 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.

Code generation

Polyfills

Editors

Parsers

Other

Gulp – Handle page reload in gulp-connect using connect-history-api-fallback


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

http://eureka.ykyuen.info/2015/08/12/gulp-handle-page-reload-in-gulp-connect-using-connect-history-api-fallback/