My Gulp Files: Ionic App Projects

For Ionic projects also I use CoffeeScript, Sass, Jade although ionic generates the project in JavaScript and Html. Here we have front-end components, compilation, browser testing, live reload, and all that goodness. Here we do need to compile CoffeScript to JavaScript, Sass to Css and Jade to Html. Another thing that needs to be solved since browser will run JavaScript, Css and html instead of CoffeScript, Jade, Sass so debugging will be really challenging. To solved that problem I generate source map files. I also use CoffeScript for my gulpfile since it makes it much more clean and compact. Some people who do that like to also create gulpfile.js file with

require('coffee-script/register');
require('./gulpfile.coffee');

as a way to load gulpfile. I prefer not to do that to not have that extra build file and confusion why there are two gulp files one with js extension other with coffee extensions, is JavaScript file complied version of coffee script, etc. Gulp can figure out that it needs to gulpfile.coffee if you have coffee-script module in node_modules. So I just add it to my dev dependencies (It does mean though that I have to live with npm warning that coffee script should be installed globally).

del = require 'del' gulp = require 'gulp' pkg = require './package.json' $ = require('gulp-load-plugins') lazy: false paths = scssFiles: [ './app/styles/ionic.app.scss' './app/styles/main.scss' ] coffeeFiles: [ './app/scripts/app.coffee', './app/scripts/run.coffee', './app/scripts/config.coffee', './app/scripts/routes.coffee', './app/scripts/**/*.coffee' ] jadeFiles: ['./app/views/**/*.jade'] imgFiles: ['./app/img/*'] jsFiles: ['./app/scripts/*.js'] htmlFiles: ['./app/index.html'] generagedFiles: ['./www/{css,img,js,templates}/', './www/index.html', './build/'] buildDir: './build/' gulp.task 'version', -> console.log pkg.version gulp.task 'clean', (cb) -> del paths.generagedFiles, cb gulp.task 'lint', -> is_jenkins = process.env.JENKINS is 'true' gulp.src paths.coffeeFiles .pipe $.coffeelint() .pipe $.coffeelint.reporter( if is_jenkins then 'checkstyle' else 'coffeelint-stylish' ) .pipe $.coffee(bare: false).on('error', $.util.log) .pipe $.jshint('.jshintrc') .pipe( if is_jenkins $.jshint.reporter('gulp-checkstyle-jenkins-reporter', filename: paths.buildDir + 'checkstyle-result.xml') else $.jshint.reporter('jshint-stylish') ) gulp.task 'copy', -> gulp.src paths.htmlFiles .pipe gulp.dest './www' gulp.src paths.imgFiles .pipe gulp.dest './www/img' gulp.src paths.jsFiles .pipe gulp.dest './www/js' gulp.task 'compile:coffee', -> gulp.src paths.coffeeFiles .pipe $.sourcemaps.init() .pipe $.ngClassify(appName: pkg.name) .pipe $.coffee(bare: false).on('error', $.util.log) .pipe $.concat('app.js') .pipe $.header("'use strict';\n") .pipe gulp.dest('./www/js') .pipe $.uglify() .pipe $.rename(extname: '.min.js') .pipe $.sourcemaps.write('.') .pipe gulp.dest('./www/js') .pipe $.size(showFiles: true) gulp.task 'compile:sass', -> gulp.src paths.scssFiles .pipe $.sourcemaps.init() .pipe $.sass().on('error', $.util.log) .pipe $.concat('style.css') .pipe gulp.dest('./www/css') .pipe $.minifyCss(keepSpecialComments: 0) .pipe $.rename(extname: '.min.css') .pipe $.sourcemaps.write('.') .pipe gulp.dest('./www/css/') .pipe $.size(showFiles: true) gulp.task 'compile:jade', -> gulp.src paths.jadeFiles .pipe $.jade() #.pipe gulp.dest('./www/templates') .pipe $.angularTemplatecache('templates.js', {standalone:true, root: 'templates/'} ) .pipe gulp.dest('./www/js') .pipe $.size(showFiles: true) gulp.task 'watch', -> gulp.watch paths.scssFiles, gulp.series('compile:sass') gulp.watch paths.coffeeFiles, gulp.series('compile:coffee') gulp.watch paths.jadeFiles, gulp.series('compile:jade') gulp.watch paths.imgFiles.concat(paths.jsFiles, paths.htmlFiles), gulp.series('copy') gulp.task 'build', gulp.series 'clean', gulp.parallel('lint', 'copy', 'compile:sass', 'compile:coffee', 'compile:jade') gulp.task 'default', gulp.parallel('build', 'watch')

Going from top to bottom, first task is version, it just gets the package version from package.json file and outputs it to the console. I use this in Jenkins.

Next comes clean. It just removes build generated files, for next build to start from a clean slate.

Next comes lint. I like to lint my code and know about issues with my code sooner than later. Based on Jenkins environment variable I decide which report format to use. During development I like to use stylish and for Jenkins, checkstyle to generate checkstyle xml and report it nicely in Jenkins using checkstyle plugin. Notice that I’m linting both CoffeeScript and JavaScript code. Why? because CoffeeScript code is what I write and JavaScript code is what I publish.

Next comes copy. It copies static files like images, JavaScript code that I didn’t write and don’t want to convert to CoffeeScript, index.html which I chose not to convert to Jade because of many reasons, etc.

Next come compile:coffee, compile:sass, compile:jade. Those compile CoffeeScript code to JavaScript, Sass to Css and Jade to html. I use ngClassify, uglify and sourcemaps for JavaScript. minifyCss and sourcemaps for Css. For Templates I use angularTemplatecache. Notice that I have piping html files down to templates directory commented out, in case I need to debug something with my templates I’ll uncomment it.

Final three are watch, build, default. build is combo task that runs clean, lint, copy and compile. Notice that after clean everything ran in parallel because all those can be executed in parallel, so why not use those cors. watch watches my files for changes and it triggers a new build automatically every time I make a change to my code. default task (which is triggered when you run gulp without passing any task) builds the projects and watches for file changes. This way I just type gulp and I’m ready to work on my project knowing that everything is good and every time I make a change it automatically will build my code.

This is the build cycle for this type of projects. Artifact here can just be a zip file, you may just zip it up, and name with proper version and store somewhere. Deploy job will talk that zip with the right version, extract and upload to Ionic View, TestFlight, HockeyApp or whatever. Or just make it continuous and every time there is a commit upload the build.

Make sure to also check my other gulp files out: