Created
December 24, 2014 08:23
-
-
Save cdarken/daf8b983f70b66230a30 to your computer and use it in GitHub Desktop.
Quick solution for ionic build optimized
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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