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