Skip to content

Instantly share code, notes, and snippets.

@cdarken
Created December 24, 2014 08:23
Show Gist options
  • Save cdarken/daf8b983f70b66230a30 to your computer and use it in GitHub Desktop.
Save cdarken/daf8b983f70b66230a30 to your computer and use it in GitHub Desktop.
Quick solution for ionic build optimized
Step 1: Add some npm packages to your devDependencies section in package.json:
"gulp-usemin": "^0.3.8",
"gulp-util": "^2.2.14",
"run-sequence": "^1.0.2",
"shelljs": "^0.3.0"
Step 2: Import them in gulpfile.js:
var sh = require('shelljs');
var usemin = require('gulp-usemin');
var runSequence = require('run-sequence');
var fs = require('fs');
var karma = require('karma').server;
Step 3: Add some paths
var paths = {
sass: ['./scss/**/*.scss'],
tempWww: './www-tmp',
filesToCopy: [
'www/index.html',
'www/img/**/*',
'www/locales/**/*',
'www/templates/**/*',
'www/lib/ionic/fonts/ionicons.woff',
'www/css/*'
]
};
Step 4: Add these new tasks to gulpfile.js:
gulp.task('build-ionic', function(done) {
if (!fs.existsSync(paths.tempWww)) {
fs.mkdirSync(paths.tempWww);
}
runSequence('sass', 'usemin', 'pack', 'stash-www', 'call-ionic', 'unstash-www');
});
gulp.task('call-ionic', function() {
sh.exec('ionic build');
});
gulp.task('stash-www', function() {
if (!fs.existsSync('./www.bak')) {
fs.renameSync('./www', './www.bak');
fs.renameSync(paths.tempWww, './www');
}
});
gulp.task('unstash-www', function() {
if (fs.existsSync('./www.bak')) {
deleteFolderRecursive('www');
fs.renameSync('./www.bak', './www');
}
});
gulp.task('pack', function(done) {
if (!fs.existsSync(paths.tempWww)) {
fs.mkdirSync(paths.tempWww);
}
gulp.src(paths.filesToCopy, { base: 'www/' })
.pipe(gulp.dest(paths.tempWww))
.on('end', done);
});
gulp.task('usemin', function() {
gulp.src('./www/index.html')
.pipe(usemin({
// you could add some other tasks here, like uglify, I was in a hurry and didn't really need it
}))
.pipe(gulp.dest(paths.tempWww));
});
/** Credit http://stackoverflow.com/a/12761924/2768444 */
function deleteFolderRecursive(path) {
var files = [];
if( fs.existsSync(path) ) {
files = fs.readdirSync(path);
files.forEach(function(file,index){
var curPath = path + "/" + file;
if(fs.lstatSync(curPath).isDirectory()) { // recurse
deleteFolderRecursive(curPath);
} else { // delete file
fs.unlinkSync(curPath);
}
});
fs.rmdirSync(path);
}
}
Some notes:
- I had to use runSequence because otherwise usemin would end after sass and the script tags would not be replaced, it's a quick and dirty solution
- I don't know of a way to tell cordova to use other dir than www for source,
so I moved the source dir out of the way and replaced it with the temporary dir
IMPORTANT: make sure you have your project in a git repo and you have commited your work, in case something wrong happens
and your source www dir will get removed
Step 5: Add the the usemin tags in your index.html (this is how I did it, you can group your sources any way you see fit)
<!-- build:js js/lib.js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- other libs you might use -->
<!-- endbuild -->
<!-- build:js js/scripts.js -->
<!-- your scripts in www/js -->
<!-- endbuild -->
Step 6: Call your new task: gulp ionic-build
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment