background preloader

Build

Facebook Twitter

Jrburke/almond. Compiling / Optimizing A Subset Of A RequireJS Application. In my last few blog posts, I explored the lazy-loading of a RequireJS module within a modular JavaScript application. I don't know if such an approach is really worthwhile - I'm not convinced that it wouldn't just be better to concatenate everything into a single, front-loaded file; but, I thought it was a fun mental exercise. To continue on in the same vein, I wanted to think about how this approach would work in a build script.

It's one thing to lazy load a module when all modules remain independent; but, what happens to lazy-loading when you need to start building and optimizing your scripts? Life is simple when you keep your modules in individual files - you make requests to load one module and RequireJS magically handles all the dependencies. R.js works by analyzing and walking your dependency tree, inlining and compacting each module along the way. To start off this exploration, I used the same lazy-loaing FAQ code that I had in my previous two blog posts. Faq.js - Our FAQ Module. Gradle. Grunt. Grunt by Example - A Tutorial for JavaScript's Task Runner - Brian Chu.

What’s Grunt used for? Automating front-end and JavaScript workflow tasks. Refreshing the browser when you change a script. Minifying and concatenating. Running tests. Enter Grunt by Example! The catch - Grunt configuration files can be fairly convoluted at first glance, usually due to the fact that developers add more and more steps to their workflow over time. Grunt is just a task runner. Npm search grunt to view literally every grunt plugin available. Get the command line interface: npm install -g grunt-cli Add the actual grunt task runner as a development dependency to your project (--save-dev adds the package as a dependency to package.json): npm install --save-dev grunt Let’s follow a process of gradual expansion. Create an empty Gruntfile.js file in your project root. Let’s say that the first task we want to add to our workflow is to be able to concatenate several JavaScript files into one.

Run npm install --save-dev grunt-contrib-concat. Running grunt preview will now run both tasks. Setup Grunt on Jenkins. Gruntis suitable for building JavaScript project as concat, minify, jshint and unit test.Jenkinsis suitable for CI as using SCM polling, scheduler. I think these tools makes our development faster. This is sample of front-end javascript project and building with Grunt on Jenkins.

Awesome project src Script files dist Compressed production files dist/cov Test coverage dist/metrics JavaScript static analysis test Test code .jshintrc jshint config file Gruntfile.js Grunt config file package.json Project config file jenkins-grunt.sh Kick grunt on jenkins View sample code on GitHub Gruntfile.js Executejshint,testem,clean,qunit-cov,plato,concat,uglify jshint Detect errors and potential problems in JavaScript code and can be used to enforce coding conventions. testem Execute browser testing framework automatically.

Clean Cleaning production and coverage directiory before building qunit-cov Coverage unit test in qunit plato JavaScript source code visualization, static analysis, and complexity tool concat Concatenate files Add. Yeoman.