Skip to content

Instantly share code, notes, and snippets.

@jdnichollsc
Last active February 17, 2018 03:06
Show Gist options
  • Save jdnichollsc/e3a323223fcb7822dbba to your computer and use it in GitHub Desktop.
Save jdnichollsc/e3a323223fcb7822dbba to your computer and use it in GitHub Desktop.
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
Copy link

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
Copy link
Author

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