Last active
February 17, 2018 03:06
-
-
Save jdnichollsc/e3a323223fcb7822dbba to your computer and use it in GitHub Desktop.
Gulp Example with Ionic Framework
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
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 |
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
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(); | |
}); |
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
<!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> |
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
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