gulpfile.js 설정.

ㅎ~ 이 gulp 설정으로만 거의 일주일을 보낸 것 같다. 

gulp 자체만으로는 헷갈리는게 없는데 gulp plugin 사용에 있어서 엄청 고생했다.

특히 main-bower-files 플러그인이 그랬다. 

암튼 이번에 영어의 중요함을 또 한번 느꼈다...

아래내용은 전적으로 내가 한 플젝 위주로 되어 있다. ( concat/uglify 는 사용하지 않았다  )

고맙게도 한글 번역 github 주소가 있다. 모르는게 있다면 아래 주소로 가서 참고 하자.  

https://github.com/preco21/gulp-docs-ko/blob/master/API.md

gulp.config.js내용

module.exports={
    dist:'dist',
    src:'src',
    files:{
        cssURL:['src/assets/css/*.css'],
        jsURL:['src/assets/js/*.js'],
        htmlURL:['src/app/**/*.html'],
        indexJs:[
            './dist/vendors/jquery/jquery-1.9.1.min.js',
            './dist/vendors/bootstrap/js/bootstrap.js',
            './dist/app/config.js',
            './dist/app/index.js'
        ],
        indexCss:[
            './dist/vendors/bootstrap/css/bootstrap.min.css',
            './dist/assets/css/common.css',
            './dist/assets/css/main.css'
        ]
    },
    jsTest:['./src/assets/js/*.js']
}

아래는 gulpfile.js 설정 내용이다. 

//path는 nodejs 문서를 참고하자. ( 아래에선 path.join()을 많이 썼다 )
//path에 대한 내용 --> http://nodejs.sideeffect.kr/docs/v0.10.0/api/path.html
var path = require('path');
var gulp = require('gulp');
var del = require('del');
//angularFilesort 플러그인은 에러가 나는데 원인을 아직 찾지 못함. 해서 호출만 해놓고 사용하진 않았다.
var angularFilesort = require('gulp-angular-filesort');
var browserSync=require('browser-sync').create();
/* 아래는 설치 및 사용한  gulp plugins
runSequence = require('run-sequence'),
inject = require('gulp-inject');
bowerFiles = require('main-bower-files');
inject = require('gulp-inject'),
concat=require('gulp-concat'),
uglify=require('gulp-uglify'),
serve = require('gulp-serve');
gulpFilter = require('gulp-filter');
 gulpNgConfig = require('gulp-ng-config');
angularFilesort = require('gulp-angular-filesort');
util = require('gulp-util');
*/

//gulp.config.js에 파일 경로를 참조하는 내용이 있다.
var gulpConfig=require('./gulp/gulp.config.js');
// Include gulp plugins
var plugins = require("gulp-load-plugins")({
    pattern: ['gulp-*', 'gulp.*', 'main-bower-files', 'run-sequence'],
    replaceString: /\bgulp[\-.]/
});

//task - gulp.task('name', [dependencies], function(){})
gulp.task('default', function(callback){
    //console.log('hello gulp');
    plugins.runSequence('build', 'watch', callback);
});
gulp.task('build', function(callback) {
    plugins.runSequence('bower-clean', 'inject',  'watch', callback)
});
gulp.task('local:build', ['config'], function(callback) {
    plugins.runSequence('clean',  'copy-build', 'watch', callback)
});
gulp.task('dist:build', ['config:build'], function(callback) {
    plugins.runSequence('clean', 'config:build', 'copy-build', 'watch', callback)
});
//gulp.task('serve', plugins.serve('dist') );
//browserSync
gulp.task('serve', ['build'], function(){
    browserInit( gulpConfig.src );
});
gulp.task('serve:local', ['local:build'], function(){
    browserInit( gulpConfig.dist, 8000 );
});
gulp.task('serve:dist', ['dist:build'], function(){
    browserInit( gulpConfig.dist, 8080 );
});

function browserInit( baseDir, port) {
    var portNum=(port===undefined)? 3000 : port
    browserSync.init({
        port:portNum,
        server:{ baseDir:baseDir }
    })
}

//angular environment settings - 자세한 내용은 gulp-ng-config로 검색하면 찾아 볼 수 있다.
gulp.task('config', function () {
    gulp.src(path.join( gulpConfig.src, '/app/config.json') )
        .pipe( plugins.ngConfig('AuthURL.config', {
            environment: 'local'
        }))
        .pipe(gulp.dest(path.join( gulpConfig.src, '/app/')))
});
gulp.task('config:build', function () {
    gulp.src( path.join( gulpConfig.src, '/app/config.json') )
        .pipe( plugins.ngConfig('AuthURL.config', {
            environment: 'production'
        }))
        .pipe(gulp.dest( path.join( gulpConfig.src, '/app/')))
});

//resource copy task
gulp.task('copy-build', ['copy-assets', 'copy-index-html', 'copy-html', 
    'copy-app-js', 'copy-vendors', 'other', 'bower-files:server']);

//copy and insert html files
gulp.task('copy-index-html', function () {
    return gulp.src(['./src/index.html' ])
        .pipe(gulp.dest( path.join( gulpConfig.dist ) ) );
});
gulp.task('copy-html', function () {
    return gulp.src(['./src/app/**/*.html' ])
        .pipe(gulp.dest( path.join( gulpConfig.dist, '/app')) );
});
//copy and insert asset files
gulp.task('copy-assets', function() {
    return gulp.src('./src/assets/**/*')
        .pipe( gulp.dest( path.join( gulpConfig.dist, '/assets') ) );
});
//copy and insert js files
gulp.task('copy-app-js', function() {
    return gulp.src('./src/app/**/*.js')
        .pipe( gulp.dest( path.join(gulpConfig.dist, '/app') ) );
});
//copy and insert vender files
gulp.task('copy-vendors', function() {
    return gulp.src('./src/vendors/**/*')
        .pipe( gulp.dest( path.join(gulpConfig.dist, '/vendors')) );
});
gulp.task('other', function () {
    var fileFilter =plugins.filter(function (file) {
        return file.stat.isFile();
    });
    return gulp.src([
        path.join(gulpConfig.src, '/**/*'),
        path.join('!'+gulpConfig.src, '/**/*.{html,css,js}')
    ])
        .pipe( fileFilter )
        .pipe( gulp.dest( path.join(gulpConfig.dist, '/') )  );
});
//copy and insert bower files
gulp.task('bower-files:local', function(){
    return bowerFilesInit('local');
});
gulp.task('bower-files:server', function(){
    return bowerFilesInit('server');
}); 

//bower로 설치한 플러그인 파일들을 빌드되는 폴더내로 이동시킴. 
//bower_components로 설치한 플러그인들은 온갖내용이 많아서 필요한 js 및 css 만 배치시켜 준다.
function bowerFilesInit( destUrl ) {
    var root=(destUrl==='local')? gulpConfig.src : gulpConfig.dist;
    return gulp.src( plugins.mainBowerFiles({
        paths: {
            bowerDirectory: 'bower_components',
            bowerrc: '.bowerrc',
            bowerJson: 'bower.json'
        }
    }), {base:'bower_components'})
        .pipe( gulp.dest( path.join( root, '/bower_components') ) )
}

//delete bower_components
gulp.task('bower-clean', function() {
    return del([path.join( gulpConfig.src, '/bower_components' )], {force:true})
})
//delete dist file
gulp.task('clean', function(callback){
    return del( [gulpConfig.dist] );
});

//inject resource url
gulp.task('index-inject', function(){
    var buildRoot=gulpConfig.dist;
    //
    var injectBower=gulp.src( plugins.mainBowerFiles(), {read:false});
    var injectBowerOpt={name:"bower", ignorePath:buildRoot};
    //
    var injectCss=gulp.src( gulpConfig.files.indexCss , {read:false} );
    var injectCssOpt={name: 'head', ignorePath:buildRoot};
    //
    var injectJs= gulp.src( gulpConfig.files.indexJs, {read:false} );
    var injectJsOpt={name: 'btm', ignorePath:buildRoot};

    return gulp.src('./src/index.html')
        .pipe( plugins.inject( injectBower,  injectBowerOpt) )
        .pipe( plugins.inject( injectCss,  injectCssOpt) )
        .pipe( plugins.inject( injectJs,  injectJsOpt))
        .pipe( gulp.dest(buildRoot) );
});

//inject task
gulp.task('inject', ['index-inject'] );
gulp.task('inject-reload', ['inject'], function() {
    browserSync.reload();
});

//watch task
gulp.task('watch', ['inject'], function () {
    gulp.watch([path.join(gulpConfig.src, '/*.html'), 'bower.json'], ['inject-reload']);
    gulp.watch(path.join(gulpConfig.src, '/assets/css/*.css'), function(event) {
        if(isOnlyChange(event)) {
            browserSync.reload(event.path);
        } else {
            gulp.start('inject-reload');
        }
    });
    gulp.watch(path.join(gulpConfig.src, '/app/**/*.js'), function(event) {
        if(isOnlyChange(event)) {
            gulp.start('scripts-reload');
        } else {
            gulp.start('inject-reload');
        }
    });
    gulp.watch(path.join(gulpConfig.src, '/app/**/*.html'), function(event) {
        browserSync.reload(event.path);
    });
});
function isOnlyChange(event) {
    return event.type === 'changed';
}

//jsLint task
gulp.task('jsLint', function(){
    return gulp.src( gulpConfig.files.jsURL )
        .pipe( plugins.jshint() )
        .pipe( plugins.jshint.reporter('default'));
});

마지막으로 bower에 대한 부분인데 bower.json에서 "dependencies" 속성 부분이 굉장히 중요하다. 

gulp 에서 inject 를 사용할때 main-bower-files(bower로 설치한 파일 경로 참조해주는 플러그인) 라는 

플러그인이 bower.json의 "dependencies" 속성을 참조하기에 매우 중요하다.  

알면 별거 아닌데  main-bower-files 플러그인 사용할때 엄청 삽질 했다.

즉 나는 bower로 설치할때 bower install 플러그인 명~~~~~~ 일케만 해서 "dependencies" 속성 설정이 안되었다. 

물론 bower 설치시 틀린 방법은 아닌데 main-bower-files플러그인이 실행이 안되는 문제점이 있었다. 

main-bower-files플러그인을 사용할 거면 bower install --save 플러그인 명~~~~~~ 으로 설치해서 "dependencies" 속성 반영을 해주자.

( 그래도 빌드시 필요한 것은 무조건 --save 선언하여 설치하는게 건강에 이롭다. 

  나중에 backend개발자가  서버에 npm 혹은 bower등으로 파일 설치시 pagekage.json으로 

  참고해 설치하는데 의존파일을 누락했다간 광탈을 경험할 수 있기에 그렇다.  )