Visual Studio CodeでGulpを実行してTypeScriptとSASSをコンパイルする方法

この記事では、Visual Studio Code でGulpを実行してTypeScriptとSASSをコンパイルし、ブラウザでプレビューする方法を記載します。

Gulpとは？

Gulpはタスクランナーです。タスクランナーはあらかじめタスクを定義しておくことで、以下のような機能を自動実行することができます。

• SassやTypeScriptのコンパイル
• トランスパイル
• 静的解析（Lint）
• コードの圧縮（Minify）、難読化
• ライブプレビュー
• など

環境

• Visual Studio Code
• Node.js

フォルダ構成

フォルダ構成は以下のような構成を想定しています。

project
├─dist
│  ├─css
│  └─js
└─src
    ├─scss
    └─ts

srcフォルダはSassやTypeScriptのソースコードを格納します。これらをGulpでビルド（コンパイル）して、Sassからcssを、TypeScriptからJavaScriptを生成していきます。

手順

1. projectフォルダを作成する
   

   任意の場所にエクスプローラーでprojectフォルダを作成します。

2. Visual Studio Codeでprojectフォルダを開く
   

   エクスプローラーでprojectフォルダを右クリックし、[Codeで開く]を選択します。

3. プロジェクトを初期化する
   

   Visual Studio Codeでターミナルを開き（Ctrl+Shift+@）、以下のコマンドを実行します。

   npm init -y
   

   npm initを実行するとpackage.jsonとpackage-lock.jsonが作られます。npm initのようにオプションなしで実行すると、対話モードになってプロジェクト名など入力を促されます。ここでは、対話モードでの入力が面倒なので、-yをつけてデフォルトの情報でpackage.jsonを作成します。

4. Gulpをインストールする
   

   以下のコマンドを実行してGulpをインストールします。

   npm i gulp -D
   

   -Dは開発環境でのみインストールするパッケージで指定します。Gulpは基本的にコンパイルなどのビルドタスクの実行に必要なだけで、デプロイ先では不要なので-Dを指定します。
   反対に実行時つまりデプロイ先で必要なパッケージのインストールの場合は、-Dはつけません。

5. gulpの関連プラグインをインストールする
   

   Gulpは実行するタスクに応じて必要な関連プラグインをインストールすることで動作します。ここでは、Sass->CSSとTypeScript->JavaScriptへのコンパイル、ライブプレビューを実行したいので、以下のコマンドを実行します。

   npm i gulp-notify -D
   npm i gulp-plumber -D
   npm i gulp-sass -D
   npm i sass -D
   npm i gulp-autoprefixer -D
   npm i gulp-uglify -D
   npm i browser-sync -D
   
   

   Gulpのプラグインについては、本記事の最後に一覧を記載しています。そちらを参照して必要なプラグインをインストールしてください。
   また、npm installを実行するとnmpはpackage.jsonにインストールしたパッケージを記録します。これによりnmp installを実行することで、開発（または実行）に必要なパッケージをインストールできます。

6. gulpfile.jsを作成する
   

   projectフォルダ直下に以下の内容でgulpfile.jsを作成します。gulpfile.jsには実行したいタスクの定義を記載します。

   // モジュールの読み込み
   var gulp = require('gulp');
   var notify = require("gulp-notify");
   var plumber = require("gulp-plumber");
   var sass = require('gulp-sass')(require('sass'));
   var typescript = require('gulp-typescript');
   var autoprefixer = require('gulp-autoprefixer');
   var uglify = require('gulp-uglify');
   var browserSync = require("browser-sync");
   
   // パスの設定
   var paths = {
     'html'   : './dist/',
     'css'    : './dist/css/',
     'js'     : './dist/js/',
     'ts'     : './src/ts/',
     'scss'   : './src/scss/',
   }
   
   // Sass -> CSS
   var sassOptions = {
     outputStyle: 'compressed'
   }
   gulp.task('sass', () => {
      return gulp.src(paths.scss + '**/*.scss')
      .pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }))
      .pipe(sass(sassOptions))
      .pipe(gulp.dest(path.css));
   });
   
   // TypeScript -> JavaScript -> Minify
   gulp.task('ts', () => {
     return gulp.src(paths.ts + '**/*.ts')
       .pipe(plumber())
       .pipe(typescript())
       .pipe(uglify())
       .pipe(gulp.dest(paths.js));
   });
   
   // browser-sync
   gulp.task('browser-sync', () => {
     browserSync({
       server: {
         baseDir: paths.html
       }
     });
     gulp.watch(paths.html + "**/*.html", gulp.task('reload'));
     gulp.watch(paths.css + "**/*.css", gulp.task('reload'));
     gulp.watch(paths.js + "**/*.js", gulp.task('reload'));
   });
   gulp.task('reload', () => {
     browserSync.reload();
   });
   
   // watch
   gulp.task('watch', function () {
     gulp.watch(paths.scss + '**/*.scss', gulp.task('scss'));
     gulp.watch(paths.ts + '**/*.ts', gulp.task('ts'));
   });
   
   gulp.task('default', gulp.series(gulp.parallel('browser-sync', 'watch'), function(){
   }));
   

7. ソースコードを編集する
   

   project\src\tsフォルダにTypeScript、project\src\scssフォルダにSassのソースコードを作成します。ここではテストのために以下のようなソースを作成します。

8. Gulpを実行する
   

   　実行するgulpfile.jsに記載したタスクが実行されます。エラーなく完了すれば、distフォルダにコンパイルされたファイルが出力されます。

   npx gulp
   

9. 完了

Appendix

よく使うGulpプラグイン

よく使うGulpプラグインを記載します。

問題発生時の対処法

Gulpを使っているといろいろなエラーが発生します。ここでは、これまでに遭遇したエラーの解消方法を紹介します。

エラー「Error in plugin “gulp-sass”」が発生する

Error in plugin "gulp-sass"
Message:

gulp-sass 5 does not have a default Sass compiler; please set one yourself.
Both the `sass` and `node-sass` packages are permitted.
For example, in your gulpfile:

  var sass = require('gulp-sass')(require('sass'));

Sassコンパイラがインストールされていないことが原因です。gulp-sass 5ではデフォルトのSassコンパイラを持っていないため、sassモジュールを別途インストールする必要があります。下記コマンドを実行してインストールすると解決します。

npm install sass -D

エラー「Error: Cannot find module ‘XXX’」が発生する

Error: Cannot find module 'sass'

モジュールがインストールされていないことが原因です。上記ではsassモジュールがインストールされていないため、以下のコマンドを入力してsassモジュールをインストールすることで解決します。

npm install sass -D

エラー「Error: Invalid dest() folder argument. Please specify a non-empty string or a function.」

dest()で指定しているパスが間違っています。

エラー「Did you forget to signal async completion?」

このメッセージが表示されても、出力ファイルは問題なく生成されていますが、Gulpタスクの完了を示す「Finished ‘ts’ after 2.1 s」が表示されません。

これは、gulp.task()のコールバック関数が結果を返していないことが原因です。下記では、コールバック関数でreturnしていません。そのため、タスクの完了を検知できていないためと考えられます。

gulp.task('ts', function () {
  gulp.src(paths.ts + '**/*.ts')
    .pipe(typescript())
    .pipe(plumber())
    .pipe(uglify())
    .pipe(gulp.dest(paths.js));
});

↓　returnで結果を返すようにすると解決します。

gulp.task('ts', () => {
  return gulp.src(paths.ts + '**/*.ts')
    .pipe(typescript())
    .pipe(plumber())
    .pipe(uglify())
    .pipe(gulp.dest(paths.js));
});

エラー「Error: watching ./dist/**/*.html: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)」

Gulp3からGulp4になった際に、gulp.watch()の引数の指定方法が変わりました。

gulp.watch(paths.ts + '**/*.ts', ['ts']);

↓　以下に変更すると解消します。

gulp.watch(paths.ts + '**/*.ts', gulp.task('ts'));

エラー「AssertionError [ERR_ASSERTION]: Task function must be specified」

Gulp3 -> Gulp4でgulp.taskの引数の指定方法が変更になったことが原因です。

gulp.task('default', ['browser-sync', 'watch']);

↓

gulp.task('default', gulp.series(gulp.parallel('browser-sync', 'watch'), function(){
}));

エクスプローラーの右クリックメニューに[Codeで開く]が表示されない

本題からそれますが、エクスプローラーの右クリックメニューに[Codeで開く]が表示されない場合は、Visual Studio Codeを更新インストールを実行します。（インストール前にアンインストールは不要です）

インストーラーの以下の画面で2つのチェックボックスをオンにしてインストールすれば[Codeで開く]が表示されるようになります。

• エクスプローラーのファイルコンテキストメニューに[Codeで開く]アクションを追加する
• エクスプローラーのディレクトリコンテキストメニューに[Codeで開く]アクションを追加する

Appendix

Gulpプラグインのブラックリスト

使ってはいけないプラグインの一覧です。インストール前に確認しましょう。

enter link description here

最後まで読んでいただきありがとうございます。
また読んでくださいませ。
そんじゃーね。

関連記事