관리 메뉴

세줄코딩

gulpfile.js 설정. 본문

Programming language/Angularjs(1.x)

gulpfile.js 설정.

개발 hello-world 2017.02.08 12:46

ㅎ~ 이 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으로 

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


'Programming language > Angularjs(1.x)' 카테고리의 다른 글

angular directive  (0) 2017.02.24
bower 간략 정리  (0) 2017.02.16
gulpfile.js 설정.  (0) 2017.02.08
Module.config / Module.constant / Module.run  (0) 2017.01.24
angular toastr  (0) 2017.01.24
yeoman gulp설정 - generator-yo-gulp / gulp-ng-config/  (0) 2017.01.24
0 Comments
댓글쓰기 폼