1. Qiita
  2. 投稿
  3. gulp

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

  • 29
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

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())をコンパイルする前に追加する。