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>

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