Posted at

GulpでTypeScriptとSASS/COMPASSをコンパイルする

More than 5 years have passed since last update.

GulpでTypeScriptとSASS/COMPASSをコンパイルするタスクを書きました。

使用しているgulpのプラグインは

gulp-tsc

gulp-compass

gulp-plumber

gulp-watch


gulpfile.js


var gulp = require('gulp');
var typescript = require('gulp-tsc');
var compass = require('gulp-compass');
var plumber = require('gulp-plumber');

//TypeScriptのタスク
gulp.task('typescript',function(){
gulp.src(['src/ts/**/*.ts'])
.pipe(plumber()) //エラーしてもウォッチを途中でやめないための処理
.pipe(typescript({module:"amd"})) //コンパイルする処理 moduleで出力するモジュールを指定
.pipe(gulp.dest('src/js')); //ファイル出力先を指定
});

//Compassのタスク
gulp.task('compass',function(){
gulp.src(['../stylesheets/sass/**/*.scss'])
.pipe(plumber())
.pipe(compass({ //コンパイルする処理
config_file : '../stylesheets/sass/config.rb',
comments : false,
css : '../stylesheets',
sass: '../stylesheets/sass/'
}));
});

//watchのタスク
gulp.task('watch',function(){
gulp.watch('src/ts/**/*.ts',function(event){
gulp.run('typescript');
});
gulp.watch('../stylesheets/sass/**/*.scss',function(event){
gulp.run('compass');
});
});

//defaultで実行するタスクを設定
gulp.task('default',function(){
gulp.run('watch');
});


Gruntに比べるとjavascriptらしく書けるので結構使いやすい。

gulp-plumberはエラーが起きても途中で止まらないようにするプラグインで.pipe(plumber())をコンパイルする前に追加する。