Restructuring from www to app folder in order to minify

ionic-v1
7

Here is my workflow: I maintain all my files outside of the www folder and minify, merge and copy them to the www folder using gulp. I’m using Sass and it works with ionic serve. I hope it helps.

My file structure:

ionic-project
|-- gulpfile.js
|-- js
|   |-- app.js
|   |-- controllers (folder)
|   |-- services (folder)
|
|-- scss
|   |-- ionic.app.scss
|   |-- moduleX (folder)
|   |-- moduleY (folder)
|
|-- www
    |-- css
    |   |-- app.min.css
    |
    |-- js
        |-- app.min.js

My gulp file:

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 uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var sh = require('shelljs');

var paths = {
    sass: ['./scss/**/*.scss'],
    scripts: ['./js/*.js', './js/**/*.js'],
    all: ['./scss/**/*.scss', './js/*.js', './js/**/*.js']
};

gulp.task('default', ['sass', 'scripts']);

gulp.task('sass', function(done) {
    gulp.src('./scss/ionic.app.scss')
        .pipe(sass())
        .pipe(minifyCss({
            keepSpecialComments: 0
        }))
        .pipe(rename('app.min.css'))
        .pipe(gulp.dest('./www/css/'))
        .on('end', done);
});

gulp.task('scripts', function() {
    gulp.src(['./js/*.js', './js/**/*.js'])
        .pipe(concat('app.min.js'))
        .pipe(uglify({mangle:false}))
        .pipe(gulp.dest('./www/js/'));
});

gulp.task('watch', function() {
    gulp.watch(paths.sass, ['sass']);
    gulp.watch(paths.scripts, ['scripts']);
});

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