Hi
Does anyone have a preferred method for there workflow using the ionic start cli and enhancing it to include css/uglify/concat/compress etc?
I’m trying to stick close to the ionic start / ionic serve cli approach and looking for the best way to extend it to handle the above. I can add to the gulpfile and achieve most of it I’m sure but wondered if anyone has already done it OR if ionic plan to enhance the workflow.
thanks
Darren
Hey i am using grunt to minify my packages.
For that you need two steps:
There is the possibility to build packages (only one minified javascript file), but i do not like it, because i am usuing requirejs adiitionally to the angularjs AMD.
Greetz, bengtler
thanks @bengtler
have used grunt before for projects - trying to stick to the ionic start setup and extend it.
do you have good success with imagemin?
couldn’t you use browserify to package as you use require like it
thanks
Darren
Yeah but browserify does not make what required do ;).
I want to load the scripts only if i need them.
Browserify loads all scripts async, but only for the reason that you do not need to consider the correct include-order.
And i am forced to write controllers, modules and so on in a predefined way. Thats is really good if you are working in a company with more than one developer on a project. And in my opinion i do not think about loading speed of a controller and so on, because the sources are minified not that large and available directly on the device (you do no need to load them via http request from a server). And if you load a module/controller/service one time, it is available for the next usages and it is not loaded again.
Yeah if you have good designers the images are mostly optimized, but you can save some bytes till kilobytes.
Greetz, bengtler
@darrenahunter, just wondering, have you found any way for minification/uglify/etc. with ionic cli?
I really need to combine all of my js files (ctrls, services, …) into just a single file.
@Memento yes I have extended the gulpfile that ships with a new ionic project to concat/uglify etc - even puts templates into a single cache file. works well enough for me. if you like msg me and I can ship you my gulpfile
@darrenahunter, That’s greats, I would be grateful if you could share your gulp file and instructions to use it.
ok no worries - just heading out now but will put something together tonight
I’m using gulp with webpack they work great together. However webpack was a little hard to learn as the docs aren’t all there yet. But if you ask for help the creator of webpack is active on stack overflow and is usaully pretty helpful. Using the two we got one minified, uglified, and debug stripped js file. I also use gulp for my scss and I get one minified file with that too.
following is my gulpfile
you will need to install a number of gulp components
npm install gulp-uglify gulp-ng-annotate gulp-clean gulp-imagemin gulp-jshint gulp-html-replace gulp-angular-templatecahce
then running gulp build will add the compressed etc… file in a ‘dist’ directory
hope this helps
var gulp = require('gulp');
var gutil = require('gulp-util');
var bower = require('bower');
var concat = require('gulp-concat');
var clean = require('gulp-clean');
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var ngAnnotate = require('gulp-ng-annotate');
var uglify = require("gulp-uglify");
var imagemin = require('gulp-imagemin');
var htmlreplace = require('gulp-html-replace');
var templateCache = require('gulp-angular-templatecache');
var sh = require('shelljs');
var paths = {
sass: ['./scss/**/*.scss'],
scripts: ['./www/js/**/*.js', '!./www/js/app.bundle.min.js'], // exclude the file we write too
images: ['./www/img/**/*'],
templates: ['./www/templates/**/*.html'],
css: ['./www/css/**/*.min.css'],
html: ['./www/index.html'],
extras: ['./www/PushNotification.js'],
ionicbundle: ['./www/lib/ionic/js/ionic.bundle.min.js'],
ionicfonts: ['./www/lib/ionic/fonts/*'],
lib: ['./www/lib/parse-1.2.18.min.js', './www/lib/moment.min.js', './www/lib/bindonce.min.js'],
dist: ['./dist/']
};
var files = {
jsbundle: 'app.bundle.min.js',
appcss: 'app.css'
};
gulp.task('default', ['sass']);
gulp.task('build', ['sass', 'scripts', 'styles', 'imagemin', 'index', 'copy']);
gulp.task('clean', function() {
return gulp.src(paths.dist, {
read: false
})
.pipe(clean());
});
// Prepare Index.html for dist - ie. using min files
gulp.task('index', ['clean'], function() {
gulp.src(paths.html)
.pipe(htmlreplace({
'css': 'css/app.min.css',
'js': 'js/app.bundle.min.js'
}))
.pipe(gulp.dest(paths.dist + '.'));
});
gulp.task('sass', function(done) {
gulp.src('./scss/ionic.app.scss')
.pipe(sass())
.pipe(gulp.dest('./www/css/'))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({
extname: '.min.css'
}))
.pipe(gulp.dest('./www/css/'))
.on('end', done);
});
// scripts - clean dist dir then annotate, minify, concat
gulp.task('scripts', ['clean', 'templateCache'], function() {
gulp.src(paths.scripts)
//.pipe(jshint())
//.pipe(jshint.reporter('default'))
.pipe(ngAnnotate({
remove: true,
add: true,
single_quotes: true
}))
.pipe(uglify())
.pipe(concat(files.jsbundle))
.pipe(gulp.dest(paths.dist + 'js'));
});
// concat all html templates and load into templateCache
gulp.task('templateCache', ['clean'], function() {
return gulp.src(paths.templates)
.pipe(templateCache({
'filename': 'templates.js',
'root': 'templates/',
'module': 'app'
}))
.pipe(gulp.dest('./www/js'));
});
// Copy all other files to dist directly
gulp.task('copy', ['clean'], function() {
// Copy ionic bundle file
gulp.src(paths.ionicbundle)
.pipe(gulp.dest(paths.dist + 'lib/ionic/js/.'));
// Copy ionic fonts
gulp.src(paths.ionicfonts)
.pipe(gulp.dest(paths.dist + 'lib/ionic/fonts'));
// Copy lib scripts
gulp.src(paths.lib)
.pipe(gulp.dest(paths.dist + 'lib'));
// Copy extra files
gulp.src(paths.extras)
.pipe(gulp.dest(paths.dist + '.'));
});
// styles - min app css then copy min css to dist
gulp.task('minappcss', function() {
return gulp.src('./www/css/' + files.appcss)
.pipe(minifyCss())
.pipe(rename({
extname: '.min.css'
}))
.pipe(gulp.dest('./www/css/'));
});
// styles - min app css then copy min css to dist
gulp.task('styles', ['clean', 'minappcss'], function() {
gulp.src(paths.css)
.pipe(gulp.dest(paths.dist + 'css'));
});
// Imagemin images and ouput them in dist
gulp.task('imagemin', ['clean'], function() {
gulp.src(paths.images)
.pipe(imagemin())
.pipe(gulp.dest(paths.dist + 'img'));
});
gulp.task('watch', function() {
gulp.watch(paths.sass, ['sass']);
});
gulp.task('install', ['git-check'], function() {
return bower.commands.install()
.on('log', function(data) {
gutil.log('bower', gutil.colors.cyan(data.id), data.message);
});
});
gulp.task('git-check', function(done) {
if (!sh.which('git')) {
console.log(
' ' + gutil.colors.red('Git is not installed.'),
'\n Git, the version control system, is required to download Ionic.',
'\n Download git here:', gutil.colors.cyan('http://git-scm.com/downloads') + '.',
'\n Once git is installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.'
);
process.exit(1);
}
done();
});I just tried by replacing by existing gulpFile.js with the above one in our project, and tried 
as said above, created “dist” folder and did some operations on js file etc…
but to me index.html file is still referring the old references, I am new to gulp, and the script is really great, thanks a lot to @darrenahunter
Hey,
I wrote a short tutorial about how to use a gulp workflow for Ionic projects:
http://www.thomasmaximini.com/2015/02/10/speeding-up-ionic-app-development-with-gulp.html
I also made an ionic gulp starter repo: https://github.com/tmaximini/ionic-gulp-seed
@darrenahunter Thanks, I absolutely love this gulp file! I’ve worked through a dozen blog posts and nothing really appealed to me, but this was a perfect starter for me. Added some more stuff to it and now it’s the gulp file I’ve always dreamed about. 
(P.S. I’m planning to publish an Ionic Starter app based on this gulp on my Github, also planning to blog about it)
@leob glad you got something out of it. like to read you blog post and see your improvements. it doesn’t really use the ‘john papa’ style of angular apps but for more simple apps I find it does the job.
@nazeels you just have to sorround the code you want to replace in your html with
< !-- build:type →
/**
- code here
*/
< !-- endbuild →
so it will look like this:
< !-- build:js →
< script src=“js/app.js”>
< script src=“js/controllers.js”>
< !-- endbuild →
and same for your css files 
P.S. well I polished the gulp.js a bit more and then went on to develop an Ionic Starter App which includes the gulp.js file:
Added a few nice (and hopefully useful) features to it.
Blogged about it here.
A simple example with Gulp: https://gist.github.com/jdnichollsc/e3a323223fcb7822dbba
Regards, Nicholls 
This is excellent. The contents of the ‘dist’ folder looks perfect!
But ionic prepare still copies from www to platforms/.... It is not aware of the dist folder. An explanation of this critical step is missing.
If I delete everything from my gulpfile ionic still runs prepare normally. So it seems as though ionic isn’t even reading the gulpfile at all. How do I get it to build / prepare from the dist folder?
Also interested by the answer. How do you tell ionic to build the ap with your dist folder?