gulp.js 設定メモ

TypeScriptとSass環境の備忘録

まずはセットアップ

ターミナル

$ npm install -g gulp # 初回インストール時のみ
------------------------------------------
$ npm init
$ npm install --save-dev gulp
$ npm install --save-dev gulp-sass
$ npm install --save-dev gulp-typescript
$ npm install --save-dev gulp-concat
$ npm install --save-dev gulp-sourcemaps

gulpfile.js

var gulp    = require("gulp");
var sass    = require("gulp-sass");
var ts      = require("gulp-typescript");
var concat  = require("gulp-concat");
var sourcemaps = require("gulp-sourcemaps");

// Sass
gulp.task('sass', function() {
    gulp.src('./sass/**/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./public/css'));
});

// TypeScript
gulp.task('ts', function () {
    var tsResult = gulp.src('./ts/**/*.ts')
        .pipe(sourcemaps.init())
        .pipe(ts({
            out   : 'main.js',
            target: 'ES6',
            removeComments: true
        }))

    return tsResult.js
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./public/js'));
})


// 監視モード
gulp.task('watch', function(){
    gulp.watch(["./sass/*.scss", './ts/**/*.ts'], ["sass", 'ts']);
});

 // デフォルトの場合、ts,sassを起動して、監視モードに移行
gulp.task('default', ['ts','sass','watch']);

最後にgulp起動

ターミナル

$ gulp