My goal is to minify my elements: JS/CSS etc.
What I did is:
app.www to app.www and the dest to app.Now, I expect the command ionic serve to watch the app folder, not the www as initially.
Is there a way to do that?
Indeed, I don’t want to deal with minified files in the browser; would be hard for debugging.
Thanks a lot
In my case, I have two different gulp commands, one that minifies and prepares everything for production, and another one that just copies everything to the www folder. Maybe that can be a solution for you too.
May you share your file?
Indeed, I don’t see the difference with my way of doing.
It does not explain how I can use ionic serve on app folder.
Thanks
I don’t want to manually alter the serve.js file:
this.watchPatterns = project.get('watchPatterns') || ['www/**/*', '!www/lib/**/*'];
=>
this.watchPatterns = project.get('watchPatterns') || ['app/**/*', '!app/lib/**/*'];
What I usually do is manually trigger the minification task to make www change, or set a watch that triggers the minification when it detect changes on the app folder. Not the ideal solution, but maybe it works for you.
I’m listening for new ideas on this matter!
You strictly don’t answer to my question 
Here is my workflow: I maintain all my files outside of the www folder and minify, merge and copy them to the www folder using gulp. I’m using Sass and it works with ionic serve. I hope it helps.
My file structure:
ionic-project
|-- gulpfile.js
|-- js
| |-- app.js
| |-- controllers (folder)
| |-- services (folder)
|
|-- scss
| |-- ionic.app.scss
| |-- moduleX (folder)
| |-- moduleY (folder)
|
|-- www
|-- css
| |-- app.min.css
|
|-- js
|-- app.min.js
My gulp file:
var gulp = require('gulp');
var gutil = require('gulp-util');
var bower = require('bower');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var sh = require('shelljs');
var paths = {
sass: ['./scss/**/*.scss'],
scripts: ['./js/*.js', './js/**/*.js'],
all: ['./scss/**/*.scss', './js/*.js', './js/**/*.js']
};
gulp.task('default', ['sass', 'scripts']);
gulp.task('sass', function(done) {
gulp.src('./scss/ionic.app.scss')
.pipe(sass())
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename('app.min.css'))
.pipe(gulp.dest('./www/css/'))
.on('end', done);
});
gulp.task('scripts', function() {
gulp.src(['./js/*.js', './js/**/*.js'])
.pipe(concat('app.min.js'))
.pipe(uglify({mangle:false}))
.pipe(gulp.dest('./www/js/'));
});
gulp.task('watch', function() {
gulp.watch(paths.sass, ['sass']);
gulp.watch(paths.scripts, ['scripts']);
});
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();
});
Thanks, really helpful.
How if you want to use the original files (not minified ones) with the ionic serve command?
Would be really useful for debugging in the browser.
The only way I found is to alter the serve.js file itself (executed by the ionic command), to specify /app (or /js as yours) instead of /www.
Any better solution?
I’m not sure if I understand your problem. I think that the serve command uses the “watch” task in gulp.
If you populate the www folder with minified files, ionic serve would use those minified files, that I don’t expect.
I’m just looking into this myself. I think I’m going to:
So ionic serve will still just look at the www folder - no change there
Please see Improve assets setup in ionic framework
Hi,
Just an update on this. I have now added a gulp build step that minifies and uglifies everything form a new “source” folder into the www folder. I use source maps when doing the minifying/uglifying, so debugging in the browser is like stepping through the original files. Works well so far.
Would be better if the CLI had this out of the box though!
What about installing cordova-minify and cordova-uglify?
like that during the build cordova will minify and uglify your code without using another folder.
Also like that you can use the power of ionic cli like the livereload and ionic serve
Yeah, something like that would be great, but that only solves half the problem for me.
e.g. It doesn’t strip out all the unnecessary files such as sass or bower package files that you don’t want copied over every time you do a build.
If the cordova hooks handled all the optimisation that gulp did then I would definitely consider using them over gulp. Although, at the minute, the ionic project is already using gulp for SASS compilation so it just makes sense to make further use of the Gulpfile.
Hi edd, could you give me some information to how you did minifying/uglifying the javascript files and create source maps? I am new to source maps, but I need source maps if I want to enable some remote debugging libraries like atatus.
Thanks in advance.
Mark
Hi @markdark - I ended up moving away form source maps and just having a dev and release build step. During dev and debugging etc I don’t minify/uglify and just use the original files. Then for release I do the minify/uglify.
I did originally try using source maps but found it much more time consuming and it seemed inconsistent and flakey when using them with Angular due to the exceptions not showing the stack trace or correct source file properly - I can’t remember exactly what the issue was, but it wasn’t working as well as my current method.
My Gulp build file is here if you want to try it out. Obviously you’ll have to edit it for your purposes. It has the source map generation in there, but just commented out.
Hope that helps
Thanks for sharing. It will help me generating source maps. I need them in production also because the app we are building needs remote debugging capabilities even when in production. I am now using Atatus for this which I can enable remotely on user level. But I need some source maps to map back to the original JS file.
Thanks again for the information.