gulp로 JSON데이터 활용시 Watch문제

퍼블리셔와 프론트엔드 개발자, 백엔드 개발자 셋 모두 파일압축 및 컴파일러로 자주 활용되는 빌드 도구 gulp!

활용하기에 따라서 작업시간이 굉장히 단축되긴하는데.. 이게 국내에서 많이 쓰이는 편도 아니고, 쓴다고해도 몇가지 정해진 npm만을 사용하고 있어서,자신이 원하는 목적에 맞게 사용하려면 가끔씩 의도치않은 오류가 나타납니다.

저같은 경우는 HTML에 공통된 텍스트(메뉴나 푸터)를 JSON 객체에 넣어서 gulp를 거치면 JSON+HTML이 합쳐져서 나오게 하기위해 gulp-swig 라는 NPM을 활용했습니다.

var getJsonData = function(file) {

  return require('./examples/' + path.basename(file.path) + '.json');

};

gulp.task('json-test', function() {

  return gulp.src('./examples/test1.html')

    .pipe(data(getJsonData))

    .pipe(swig())

    .pipe(gulp.dest('build'));

});

getJsonData 변수에서 Json을 가져와서 text1.html에 삽입하는 형태인데, 데이터는 제대로 html에 입력되긴했습니다만 Watch기능을 활용할때 문제가 발생했습니다.

바로 require를 통해 JSON을 불러오게 되면, JSON을 수정시 > Watch문을 돌게해도 그 데이터가 변하지 않는 것인데요.

그래서 찾은 방법이 Node.js에서 기본적으로 제공하는 fs(fileSystem)을 활용하여 JSON을 불러내는것입니다.

var dataFile = './inc/ex.json';

.pipe(data(function(file) {

return JSON.parse(fs.readFileSync(dataFile));

}))

이렇게 처리하시면 JSON이 수정될때마다 watch를 실행하게 설정해주시면 다 해결됩니다.

.pipe(swig({defaults: { cache: false }}))

그리고 swig에는 이 옵션을 넣어주셔야 watch가 활성화됩니다.

minify