ionic开发介绍之gulp 简绍二

本文只是简单的简绍。适用于刚刚开发ionic项目的同学学习了解

为了实现边修改边出效果的功能，我们需要使用gulp-watch来 实现，以上介绍的gulpfile.js模板只是学习示例，在实际的项目中应为要对js、css、html、图片，进行压缩，以及在组合（把多个文件合成一个，以减少网络请求次数），因此需要把源文件和编译好的文件分开放置。一般源文件放在src目录，编译好的文件放到www目录，www为网页的根目录，用于存放可以执行的网页。结合以上各个功能就有了一下gulpfile.js文件的设计，当然这个文件是我借鉴的。

关于详细的gulpfile.js编写，请参考：http://www.cnblogs.com/2050/p/4198792.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 foreach = require('gulp-foreach');
var htmlmin = require('gulp-htmlmin');
var notify = require("gulp-notify");
var preen = require('preen');
var sourcemaps = require('gulp-sourcemaps');
var imagemin = require('gulp-imagemin');
var autoprefixer = require('gulp-autoprefixer');
var path = require('path');
var del = require('del');

var paths = {
    sass: ['scss/**/*.scss'],
    index: 'app/index.html',
    scripts: ['app/js/app.js', 'app/js/**/*.js'],
    styles: 'app/scss/**/*.*',
    templates: 'app/templates/**/*.*',
    images: 'app/img/**/*.*',
    lib: 'www/lib/**/*.*',
    //Destination folders
    destImages: './www/img/',
    destTemplates: './www/templates/'
};

gulp.task('default', ['sass', 'index', 'scripts', 'styles', 'templates', 'images', 'lib']);

gulp.task('serve', function(done){
    sh.exec('ionic serve', done); 
});

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

gulp.task('index', function() {
    return gulp.src(paths.index)
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest("./www/"))
        .pipe(notify({ message: 'Index built' }));
});

gulp.task('scripts', function() {
    return gulp.src(paths.scripts)
        .pipe(sourcemaps.init())
        .pipe(concat("app.js"))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest("./www/build/"))
        .pipe(rename('app.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest("./www/build/"))
        .pipe(notify({ message: 'Scripts built' }));
});

gulp.task('styles', function() {
    return gulp.src(paths.styles)
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(autoprefixer('last 2 version'))
        .pipe(concat('style.css'))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./www/css/'))
        .pipe(rename({ suffix: '.min' }))
        .pipe(minifyCss())
        .pipe(gulp.dest('./www/css/'))
        .pipe(notify({ message: 'Styles built' }));
});

function MinifyTemplates(path, destPath) {
    return gulp.src(path)
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest(destPath || paths.destTemplates));
}

gulp.task('templates', ['clean-templates'], function() {
    return MinifyTemplates(paths.templates).on('end', function() {
        gulp.src('').pipe(notify({ message: 'Templates built' }))
    });
});

function MinifyImages(path, destPath) {
    return gulp.src(path)
        .pipe(imagemin({ optimizationLevel: 5 }))
        .pipe(gulp.dest(destPath || paths.destImages));
}

gulp.task('images', ['clean-images'], function() {
    return MinifyImages(paths.images).on('end', function() {
        gulp.src('').pipe(notify({ message: 'Images built' }))
    });
});

gulp.task('lib', function(done) {
    //https://forum.ionicframework.com/t/how-to-manage-bower-overweight/17997/10?u=jdnichollsc
    preen.preen({}, function() {
        gulp.src('').pipe(notify({ message: 'Lib built' }));
        done();
    });
});

gulp.task('clean-images', function() {
    return del(paths.destImages);
});

gulp.task('clean-templates', function() {
    return del(paths.destTemplates);
});

gulp.task('watch', function() {
    gulp.watch(paths.sass, ['sass']);
    gulp.watch(paths.index, ['index']);
    gulp.watch(paths.scripts, ['scripts']);
    gulp.watch(paths.styles, ['styles']);
    gulp.watch(paths.templates, function(event){
        var destPathFile = path.join('./www', path.relative(path.join(__dirname, './app'), event.path));
        if(event.type === "deleted"){
            del(destPathFile);
        }else{
            var pathFile = path.relative(__dirname, event.path);
            var destPath = path.dirname(destPathFile);
            MinifyTemplates(pathFile, destPath).on('end', function() {
                gulp.src('').pipe(notify({ message: 'Template built' }))
            });
        }
    });
    gulp.watch(paths.images, function(event){
        var destPathFile = path.join('./www', path.relative(path.join(__dirname, './app'), event.path));
        if(event.type === "deleted"){
            del(destPathFile);
        }else{
            var pathFile = path.relative(__dirname, event.path);
            var destPath = path.dirname(destPathFile);
            MinifyImages(pathFile, destPath).on('end', function() {
                gulp.src('').pipe(notify({ message: 'Image built' }))
            });
        }
    });
    gulp.watch(paths.lib, ['lib']);
});

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

这个gulpfile.js使用方法如下，

gulp 编译整个项目到www目录

gulp watch 开始监控源码目录（app）的变化，并编译变化的部分，并更新到www目录

更新后如果浏览器没有自动刷新，可以手工点击刷新，如果想要使用自动刷新，参考如下连接的文章末尾。

关于，gulp的更进一步，构建完整的结构框架，请参考：

https://github.com/chenbin92/ionic-quickstarter-with-gulp