LoginSignup
29
29

More than 5 years have passed since last update.

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

Posted at

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

29
29
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
29
29