Gulp Example with Ionic Framework

Basic Structure

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

gulpfile.js

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();
});

index.html

<!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>

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

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