Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Gulp Example with Ionic Framework
css/
----- ionic.app.css //Created using Gulp - Used for debugging
----- ionic.app.min.css //Created using Gulp
----- style.css
----- //More styles from libraries like tooltipster.css for example
img/
----- logo.png
----- icons/ //Example
---------- user1.png
---------- user2.png
js/
----- controllers/ //Remove folder in the compiled version for Android and iOS
---------- mainController.js
---------- otherController.js
----- directives/ //Remove folder in the compiled version for Android and iOS
---------- mainDirective.js
---------- otherDirective.js
----- services/ //Remove folder in the compiled version for Android and iOS
---------- userService.js
---------- itemService.js
----- app.js
----- controllers.js //Created using Gulp - Used for debugging
----- controllers.min.js //Created using Gulp
----- directives.js //Created using Gulp - Used for debugging
----- directives.min.js //Created using Gulp
----- services.js //Created using Gulp - Used for debugging
----- services.min.js //Created using Gulp
----- filter.js
lib/ //External libraries like Ionic and ngCordova
----- ionic/
---------- js/
--------------- ionic.bundle.min.js
----- ngCordova/
---------- dist/
--------------- ng-cordova.min.js
----- //More libraries...
templates/
----- home.html
----- login.html
----- addUser.html
----- modals/ //Templates to Popups
---------- editUser.html
index.html
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 rename = require('gulp-rename');
var sh = require('shelljs');
var uglify = require('gulp-uglify');
var paths = {
sass: ['./scss/**/*.scss'],
controllers: ['./www/js/controllers/*.js'],
directives: ['./www/js/directives/*.js'],
services: ['./www/js/services/*.js']
};
gulp.task('default', ['sass', 'controllers', 'directives', 'services']);
gulp.task('sass', function(done) {
gulp.src('./scss/ionic.app.scss')
.pipe(sass({
errLogToConsole: true
}))
.pipe(gulp.dest('./www/css/'))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('./www/css/'))
.on('end', done);
});
gulp.task('controllers', function() {
return gulp.src(paths.controllers)
.pipe(concat("controllers.js"))
.pipe(gulp.dest("./www/js/"))
.pipe(rename('controllers.min.js'))
.pipe(uglify())
.pipe(gulp.dest("./www/js/"));
});
gulp.task('directives', function() {
return gulp.src(paths.directives)
.pipe(concat("directives.js"))
.pipe(gulp.dest("./www/js/"))
.pipe(rename('directives.min.js'))
.pipe(uglify())
.pipe(gulp.dest("./www/js/"));
});
gulp.task('services', function() {
return gulp.src(paths.services)
.pipe(concat("services.js"))
.pipe(gulp.dest("./www/js/"))
.pipe(rename('services.min.js'))
.pipe(uglify())
.pipe(gulp.dest("./www/js/"));
});
gulp.task('watch', function() {
gulp.watch(paths.sass, ['sass']);
gulp.watch(paths.controllers, ['controllers']);
gulp.watch(paths.directives, ['directives']);
gulp.watch(paths.services, ['services']);
});
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>Demo</title>
<link href="css/ionic.app.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
<script src="js/services.js"></script>
<script src="js/filters.js"></script>
</head>
<body ng-app="Demo">
<ion-nav-view animation="slide-left-right"></ion-nav-view>
</body>
</html>
@maiskovich

This comment has been minimized.

Copy link

@maiskovich maiskovich commented Feb 26, 2016

What are you doing to delete the folders controllers, directives and services in the compiled version?how do you keep the files without minifying only for debuging and use the other for production?

Thank you very much

@jdnichollsc

This comment has been minimized.

Copy link
Owner Author

@jdnichollsc jdnichollsc commented Mar 12, 2016

See my new version to solve your comment @maiskovich 👯 https://github.com/jdnichollsc/Ionic-Starter-Template

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