gulp - 변경된 파일만 처리하기
- Nest
- Development
- Category
- node.js
- Hit
- 1541
- Star
- 0
gulp
같은 자동 빌드 방식은 작은 프로젝트에서 여러 파일을 특정 위치에서 몇몇 파일로 컴파일 하기위해서 주로 사용된다.
하지만 곳곳에 드래곤볼같이 퍼져있는 css나 js파일을 같은 위치에서 컴파일 할 수 있는 방법을 못찾고 있어서 애를 먹고 있었는데 이제서야 프로그램을 다 작성했다.
귀찮아서 파일 내용 통째로 올려둔다.
gulpfile.js
function log(o){console.log(o);}
var gulp = require('gulp');
var concat = require('gulp-concat');
var scss = require('gulp-sass');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var rename = require('gulp-rename');
// get parameter
var getParams = function(optionKey)
{
var o = process.argv.indexOf("--" + optionKey);
return process.argv[o+1];
};
// get Dir
var getDir = function(pwd)
{
return pwd.replace(/[^\/]*$/, '');
};
// get filename
var getFilename = function(pwd)
{
return pwd.replace(/^.*[\\\/]/, '');
};
// scss to css [watch]
gulp.task('scss:watch', function(){
gulp.watch('**/*.scss')
.on('change', function(file){
// skip import file (xyz.src.scss)
if ( /src.scss$/.test(getFilename(file.path)) ) return;
// convert scss file
gulp.src(file.path)
.pipe(sourcemaps.init())
.pipe(scss({
//outputStyle: 'compact'
outputStyle: 'compressed'
}).on('error', scss.logError))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest( getDir(file.path) ));
});
});
// compress javascript [watch]
gulp.task('js:watch', function(){
// do not compile script files
gulp.watch('**/*.js').on('change', function(file){
if ( /ext\/|node_module\/|gulpfile.js|min.js$/.test(file.path) ) {
return;
}
// convert script file
gulp.src(file.path)
.pipe(uglify())
.pipe(rename({ extname : '.min.js' }))
.pipe(gulp.dest( getDir(file.path) ));
});
});
// default
gulp.task('default', function(){
console.log('say hello');
});
예외처리해야하는 파일이 있을 경우에는 조건문으로 예외 처리해서 return으로 실행에서 빠져나갈 수 있도록 한다.scss:watch
는 *.scss
파일을 *.css
파일로 만들어주는 역할을 하고, js:watch
는 *.js
파일을 *.min.js
파일로 변경해주는 역할을 한다.
watch().on('change')
이벤트 덕분에 특정파일이 변경이 될때 실행하고 경로를 가져올 수 있다.
실행
다음과같이 명령어중에 하나를 실행해놓고 해당되는 경로에서 파일을 수정하면 파일이 변경될때마다 스크립트 짠대로 실행하여 파일이 만들어진다.
scss to css
gulp sass:watch
js to minify js
gulp js:watch