Skip to content

Instantly share code, notes, and snippets.

@Evanion
Last active April 18, 2017 16:14
Show Gist options
  • Star 12 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Evanion/e26b7f87a0fa72dc7ca5 to your computer and use it in GitHub Desktop.
Save Evanion/e26b7f87a0fa72dc7ca5 to your computer and use it in GitHub Desktop.
Revised Ionic build environment
{
"directory": "vendor"
}
node_modules/
platforms/
plugins/
vendor/
www/maps/
www/js/
www/css/
.idea/
.DS_Store
.idea/workspace.xml
{
"name": "app",
"private": "true",
"devDependencies": {
"ionic": "driftyco/ionic-bower#1.0.0-beta.13"
},
"dependencies": {
"moment": "~2.8.3",
"angular-moment": "~0.8.2",
"ngCordova": "~0.1.4-alpha",
"angular-resource": "~1.2.26",
"lodash": "~2.4.1",
"ngstorage": "~0.3.0",
"fontawesome": "~4.2.0"
},
"resolutions": {
"angular": "~1.2.26"
},
"overrides": {
"ionic": {
"main": [
"js/ionic.min.js",
"js/ionic-angular.min.js"
]
},
"fontawesome": {
"main": []
}
}
}
var gulp = require('gulp');
var gutil = require('gulp-util');
var bower = require('bower');
var concat = require('gulp-concat');
var cache = require('gulp-cached');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
var ngAnnotate = require('gulp-ng-annotate');
var ngHtml2Js = require('gulp-ng-html2js');
var minifyHtml = require('gulp-minify-html');
var angularFilesort = require('gulp-angular-filesort');
var bowerFiles = require('main-bower-files');
var sh = require('shelljs');
var bowerConf = {
paths: './',
includeDev: true
};
var htmlminOpts = {
removeComments: true,
collapseWhitespace: true,
removeEmptyAttributes: false,
collapseBooleanAttributes: true,
removeRedundantAttributes: true
};
var smConf = {includeContent: false, sourceRoot: '../src'};
var paths = {
sass: ['./scss/**/*.scss'],
js: ['./src/**/*.js'],
vendor: ['./vendor/**/*.js'],
templates: ['./src/**/*.tpl.html']
};
gulp.task('default', ['sass', 'js', 'vendor', 'templates', 'fonts']);
/*
| --- SASS -----------------------------------------------
*/
gulp.task('sass', function(done) {
gulp.src('./scss/ionic.app.scss')
.pipe(cache('css'))
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sass())
//.pipe(sourcemaps.write('./maps'))
//.pipe(gulp.dest('./www/css/'))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(sourcemaps.write('../maps'))
.pipe(gulp.dest('./www/css/'))
.on('end', done);
});
/*
| --- JS -------------------------------------------------
*/
gulp.task('vendor', function(done) {
gulp.src(bowerFiles(bowerConf))
.pipe(cache('vendor'))
.pipe(sourcemaps.init({loadMaps: true}))
//.pipe(angularFilesort())
.pipe(concat('vendor.js'))
//.pipe(ngAnnotate())
//.pipe(sourcemaps.write('./maps'))
//.pipe(gulp.dest('./www/js/'))
.pipe(uglify())
.pipe(rename({ extname: '.min.js' }))
.pipe(sourcemaps.write('../maps'))
.pipe(gulp.dest('./www/js/'))
.on('end', done);
});
gulp.task('js', function(done) {
gulp.src(['./src/**/*.js'])
.pipe(cache('app'))
.pipe(angularFilesort())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(concat('all.js'))
.pipe(ngAnnotate())
//.pipe(sourcemaps.write('./maps'))
//.pipe(gulp.dest('./www/js/'))
.pipe(uglify())
.pipe(rename({ extname: '.min.js' }))
.pipe(sourcemaps.write('../maps'))
.pipe(gulp.dest('./www/js/'))
.on('end', done);
});
/*
| --- Templates ------------------------------------------
*/
gulp.task('templates', function(done) {
gulp.src('./src/**/*.tpl.html')
.pipe(cache('templates'))
.pipe(minifyHtml({
empty: true,
spare: true,
quotes: true
}))
.pipe(ngHtml2Js({
moduleName: 'templates'
}))
.pipe(concat('templates.js'))
.pipe(ngAnnotate())
//.pipe(gulp.dest('./www/js/'))
.pipe(rename({ extname: '.min.js' }))
.pipe(uglify())
.pipe(gulp.dest('./www/js/'))
.on('end', done);
});
/*
| --- Fonts ------------------------------------------
*/
gulp.task('fonts', function() {
return gulp.src([
'./vendor/ionic/**/*.ttf', './vendor/ionic/**/*.woff', './vendor/ionic/**/*.svg',
'./vendor/fontawesome/**/*.ttf', './vendor/fontawesome/**/*.woff', './vendor/fontawesome/**/*.svg'
])
.pipe(gulp.dest('./www/assets'));
});
gulp.task('watch', function() {
gulp.watch(paths.sass, ['sass']);
gulp.watch(paths.js, ['js']);
gulp.watch(paths.vendor, ['vendor']);
gulp.watch(paths.templates, ['templates']);
});
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();
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<!-- compiled css output -->
<link href="css/ionic.app.min.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="js/vendor.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/templates.min.js"></script>
<script src="js/all.min.js"></script>
</head>
<body ng-app="app" animation="slide-left-right-ios7">
<ion-nav-view></ion-nav-view>
</body>
</html>
/*
To customize the look and feel of Ionic, you can override the variables
in ionic's _variables.scss file.
For example, you might change some of the default colors:
$light: #fff !default;
$stable: #f8f8f8 !default;
$positive: #4a87ee !default;
$calm: #43cee6 !default;
$balanced: #66cc33 !default;
$energized: #f0b840 !default;
$assertive: #ef4e3a !default;
$royal: #8a6de9 !default;
$dark: #444 !default;
*/
// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: "../assets/fonts" !default;
$fa-font-path: $ionicons-font-path;
// Include all of Ionic
@import "vendor/ionic/scss/ionic";
@import "vendor/fontawesome/scss/font-awesome";
{
"name": "app",
"app_id": "",
"gulpStartupTasks": [
"sass",
"js",
"vendor",
"templates",
"fonts",
"watch"
],
"watchPatterns": [
"www/**/*",
"vendor/**/*",
"src/**/*"
]
}
{
"name": "app",
"version": "1.0.0",
"description": "app: An Ionic project",
"dependencies": {
"gulp": "^3.5.6",
"gulp-angular-filesort": "^1.0.4",
"gulp-cached": "^1.0.1",
"gulp-concat": "^2.2.0",
"gulp-minify-css": "^0.3.0",
"gulp-minify-html": "^0.1.6",
"gulp-ng-annotate": "^0.3.3",
"gulp-ng-html2js": "^0.1.8",
"gulp-rename": "^1.2.0",
"gulp-sass": "^0.7.1",
"gulp-sourcemaps": "^1.2.4",
"gulp-uglify": "^1.0.1",
"main-bower-files": "^2.1.0",
"ng-annotate": "^0.10.2"
},
"devDependencies": {
"bower": "^1.3.3",
"gulp-util": "^2.2.14",
"shelljs": "^0.3.0"
}
}
@kennyki
Copy link

kennyki commented Apr 18, 2015

Remember to add 'templates' as a dependency in your app module definition:

angular.module('my-app', [..., 'templates', ...]);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment