# Ionic app dev with gulp minify compress etc

**URL:** <https://forum.ionicframework.com/t/ionic-app-dev-with-gulp-minify-compress-etc/8087>\
**Category:** ionic-v1\
**Created:** [August 12, 2014, 4:29am UTC](https://forum.ionicframework.com/t/ionic-app-dev-with-gulp-minify-compress-etc/8087 "2014-08-12T04:29:21Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![darrenahunter](https://avatars.discourse-cdn.com/v4/letter/d/ecb155/32.png) [@darrenahunter](https://forum.ionicframework.com/u/darrenahunter)\
**Post date:** [August 12, 2014, 4:29am UTC](https://forum.ionicframework.com/t/ionic-app-dev-with-gulp-minify-compress-etc/8087/1 "2014-08-12T04:29:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bengtler](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bengtler/32/98565_2.png) [@bengtler](https://forum.ionicframework.com/u/bengtler)\
**Post date:** [August 12, 2014, 5:43am UTC](https://forum.ionicframework.com/t/ionic-app-dev-with-gulp-minify-compress-etc/8087/2 "2014-08-12T05:43:17Z")

</div>

Hey i am using grunt to minify my packages.  
For that you need two steps:

- use ngmin - to get your angularjs files uglify ready (corrected uses of services and so on)
- use uglify to minify the files  
if you use the sass sources the generated css should be automatically minified  
There is also a grunt plugin called imagemin that can minify images using optipng and so on.

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

---

<div class="post-metadata">

**Author:** ![darrenahunter](https://avatars.discourse-cdn.com/v4/letter/d/ecb155/32.png) [@darrenahunter](https://forum.ionicframework.com/u/darrenahunter)\
**Post date:** [August 12, 2014, 6:15am UTC](https://forum.ionicframework.com/t/ionic-app-dev-with-gulp-minify-compress-etc/8087/3 "2014-08-12T06:15:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bengtler](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bengtler/32/98565_2.png) [@bengtler](https://forum.ionicframework.com/u/bengtler)\
**Post date:** [August 12, 2014, 6:22am UTC](https://forum.ionicframework.com/t/ionic-app-dev-with-gulp-minify-compress-etc/8087/4 "2014-08-12T06:22:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Memento](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/memento/32/68159_2.png) [@Memento](https://forum.ionicframework.com/u/Memento)\
**Post date:** [November 8, 2014, 8:53pm UTC](https://forum.ionicframework.com/t/ionic-app-dev-with-gulp-minify-compress-etc/8087/5 "2014-11-08T20:53:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![darrenahunter](https://avatars.discourse-cdn.com/v4/letter/d/ecb155/32.png) [@darrenahunter](https://forum.ionicframework.com/u/darrenahunter)\
**Post date:** [November 8, 2014, 9:09pm UTC](https://forum.ionicframework.com/t/ionic-app-dev-with-gulp-minify-compress-etc/8087/6 "2014-11-08T21:09:07Z")

</div>

@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

---

<div class="post-metadata">

**Author:** ![Memento](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/memento/32/68159_2.png) [@Memento](https://forum.ionicframework.com/u/Memento)\
**Post date:** [November 8, 2014, 9:19pm UTC](https://forum.ionicframework.com/t/ionic-app-dev-with-gulp-minify-compress-etc/8087/7 "2014-11-08T21:19:29Z")

</div>

@darrenahunter, That’s greats, I would be grateful if you could share your gulp file and instructions to use it.

---

<div class="post-metadata">

**Author:** ![darrenahunter](https://avatars.discourse-cdn.com/v4/letter/d/ecb155/32.png) [@darrenahunter](https://forum.ionicframework.com/u/darrenahunter)\
**Post date:** [November 8, 2014, 9:44pm UTC](https://forum.ionicframework.com/t/ionic-app-dev-with-gulp-minify-compress-etc/8087/8 "2014-11-08T21:44:54Z")

</div>

ok no worries - just heading out now but will put something together tonight

---

<div class="post-metadata">

**Author:** ![epelc](https://avatars.discourse-cdn.com/v4/letter/e/4bbf92/32.png) [@epelc](https://forum.ionicframework.com/u/epelc)\
**Post date:** [November 9, 2014, 12:23am UTC](https://forum.ionicframework.com/t/ionic-app-dev-with-gulp-minify-compress-etc/8087/9 "2014-11-09T00:23:05Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![darrenahunter](https://avatars.discourse-cdn.com/v4/letter/d/ecb155/32.png) [@darrenahunter](https://forum.ionicframework.com/u/darrenahunter)\
**Post date:** [November 9, 2014, 8:38pm UTC](https://forum.ionicframework.com/t/ionic-app-dev-with-gulp-minify-compress-etc/8087/10 "2014-11-09T20:38:05Z")

</div>

@Memento

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();
});
```

---

<div class="post-metadata">

**Author:** ![nazeels](https://avatars.discourse-cdn.com/v4/letter/n/f08c70/32.png) [@nazeels](https://forum.ionicframework.com/u/nazeels)\
**Post date:** [November 14, 2014, 1:56pm UTC](https://forum.ionicframework.com/t/ionic-app-dev-with-gulp-minify-compress-etc/8087/11 "2014-11-14T13:56:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tmaximini](https://avatars.discourse-cdn.com/v4/letter/t/71c47a/32.png) [@tmaximini](https://forum.ionicframework.com/u/tmaximini)\
**Post date:** [February 12, 2015, 9:51am UTC](https://forum.ionicframework.com/t/ionic-app-dev-with-gulp-minify-compress-etc/8087/12 "2015-02-12T09:51:19Z")

</div>

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](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](https://github.com/tmaximini/ionic-gulp-seed)

---

<div class="post-metadata">

**Author:** ![emj365](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/emj365/32/90556_2.png) [@emj365](https://forum.ionicframework.com/u/emj365)\
**Post date:** [July 28, 2015, 12:06am UTC](https://forum.ionicframework.com/t/ionic-app-dev-with-gulp-minify-compress-etc/8087/13 "2015-07-28T00:06:45Z")

</div>

thank you [https://github.com/diegonetto/generator-ionic](https://github.com/diegonetto/generator-ionic)

---

<div class="post-metadata">

**Author:** ![leob](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/leob/32/14245_2.png) [@leob](https://forum.ionicframework.com/u/leob)\
**Post date:** [July 28, 2015, 12:32pm UTC](https://forum.ionicframework.com/t/ionic-app-dev-with-gulp-minify-compress-etc/8087/14 "2015-07-28T12:32:17Z")

</div>

@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)

---

<div class="post-metadata">

**Author:** ![darrenahunter](https://avatars.discourse-cdn.com/v4/letter/d/ecb155/32.png) [@darrenahunter](https://forum.ionicframework.com/u/darrenahunter)\
**Post date:** [July 28, 2015, 10:33pm UTC](https://forum.ionicframework.com/t/ionic-app-dev-with-gulp-minify-compress-etc/8087/15 "2015-07-28T22:33:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![nbamj](https://avatars.discourse-cdn.com/v4/letter/n/e480ec/32.png) [@nbamj](https://forum.ionicframework.com/u/nbamj)\
**Post date:** [July 29, 2015, 7:27am UTC](https://forum.ionicframework.com/t/ionic-app-dev-with-gulp-minify-compress-etc/8087/16 "2015-07-29T07:27:07Z")

</div>

@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 😄

---

<div class="post-metadata">

**Author:** ![leob](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/leob/32/14245_2.png) [@leob](https://forum.ionicframework.com/u/leob)\
**Post date:** [August 4, 2015, 12:11pm UTC](https://forum.ionicframework.com/t/ionic-app-dev-with-gulp-minify-compress-etc/8087/17 "2015-08-04T12:11:43Z")

</div>

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:

[Ionic Quickstarter](https://github.com/leob/ionic-quickstarter)

Added a few nice (and hopefully useful) features to it.

Blogged about it [here](http://codepen.io/leob6/blog/ionic-quickstarter-a-starter-app-to-kickstart-your-app-development).

---

<div class="post-metadata">

**Author:** ![jdnichollsc](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jdnichollsc/32/137196_2.png) [@jdnichollsc](https://forum.ionicframework.com/u/jdnichollsc)\
**Post date:** [August 4, 2015, 4:58pm UTC](https://forum.ionicframework.com/t/ionic-app-dev-with-gulp-minify-compress-etc/8087/18 "2015-08-04T16:58:15Z")

</div>

A simple example with Gulp: [https://gist.github.com/jdnichollsc/e3a323223fcb7822dbba](https://gist.github.com/jdnichollsc/e3a323223fcb7822dbba)

**Regards, Nicholls** 😁

---

<div class="post-metadata">

**Author:** ![aderowbotham](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/aderowbotham/32/142355_2.png) [@aderowbotham](https://forum.ionicframework.com/u/aderowbotham)\
**Post date:** [October 1, 2015, 9:07pm UTC](https://forum.ionicframework.com/t/ionic-app-dev-with-gulp-minify-compress-etc/8087/19 "2015-10-01T21:07:08Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Requiescat](https://avatars.discourse-cdn.com/v4/letter/r/3be4f8/32.png) [@Requiescat](https://forum.ionicframework.com/u/Requiescat)\
**Post date:** [June 25, 2016, 8:10am UTC](https://forum.ionicframework.com/t/ionic-app-dev-with-gulp-minify-compress-etc/8087/20 "2016-06-25T08:10:04Z")

</div>

Also interested by the answer. How do you tell ionic to build the ap with your dist folder?