Memo

Gulpの設定まとめ

作業用ディレクトリを作成して以下を実行

>npm init -y


以下のプラグインをインストール（上で紹介したもののまとめ）

>npm install -D gulp
>npm install -D gulp-sass
>npm install -D gulp-concat
>npm install -D gulp-clean-css
>npm install -D gulp-imagemin
>npm install -D typescript
>npm install -D gulp-typescript
>npm install -D gulp-uglify


今回の設定のため、以下のプラグインを追加インストール

SASSの記述エラーでコンパイルできなかった時、ファイル監視が停止しないようにする
>npm install -D gulp-plumber

変更された画像のみ最適化
>npm install -D gulp-changed


gulp-sass, gulp-plumberを使うときの注意 - Qiita
https://qiita.com/Quramy/items/5491d8da29d1fe047464

[Gulp] これからはじめるGulp（13）：gulp-changedプラグインで変更されたファイルだけを処理させる
http://whiskers.nukos.kitchen/2014/12/13/gulp-changed.html

gulpfile.js の内容は以下のとおり

const gulp = require('gulp');
const concat = require('gulp-concat');

// SASS
const sass = require('gulp-sass');
const plumber = require('gulp-plumber')
const cleanCSS = require('gulp-clean-css');

const sass_sources = [
  'assets/sass/**/*.scss'
];
const css_diredtory = 'css';
const css_file = 'style.css';

gulp.task('sass', function() {
  return gulp
    .src(sass_sources, {
      sourcemaps: true,
    })
    .pipe(plumber({
      errorHandler: function(err) {
        console.log(err.messageFormatted);
        this.emit('end');
      }
    }))
    .pipe(sass({
      outputStyle: 'expanded'
    }))
    .pipe(concat(css_file))
    .pipe(cleanCSS())
    .pipe(gulp.dest(css_diredtory, {
      sourcemaps: './',
    }));
});

// TypeScript
const typescript = require('gulp-typescript');
const uglify = require('gulp-uglify');

const ts_sources = [
  'assets/ts/**/*.ts'
];
const js_diredtory = 'js';
const js_file = 'script.js';

gulp.task('ts', function() {
  return gulp
    .src(ts_sources, {
      sourcemaps: true,
    })
    .pipe(typescript({
      target: 'ES5',
      removeComments: false
    }))
    .pipe(concat(js_file))
    .pipe(uglify())
    .pipe(gulp.dest(js_diredtory, {
      sourcemaps: './',
    }));
});

// Image
const imagemin = require('gulp-imagemin');
const changed = require('gulp-changed');

const image_sources = [
  'assets/img/**/*'
];
const image_diredtory = 'img';

gulp.task('image', function() {
  return gulp
    .src(image_sources)
    .pipe(changed(image_diredtory))
    .pipe(imagemin())
    .pipe(gulp.dest(image_diredtory));
});

// Watch
gulp.task('watch', function(){
  gulp.watch(sass_sources, gulp.task('sass'));
  gulp.watch(ts_sources, gulp.task('ts'));
  gulp.watch(image_sources, gulp.task('image'));
});

// Task
gulp.task('default', gulp.task('watch'));


この場合、フォルダ構成は以下のようになる
srcの「**/*」という指定は「すべてのファイル」という意味で、これによりフォルダに階層構造があっても処理される

assets/img/		... 作業用画像の格納場所
assets/sass/		... SASSの格納場所
assets/ts/		... TypeScriptの格納場所
css/			... 最適化後CSSの書き出し場所
img/			... 最適化後画像の書き出し場所
js/			... 最適化後JavaScriptの書き出し場所
node_modules/		... node.jsのモジュール
gulpfile.js
index.html		... HTMLファイル（トップページ）
package.json
package-lock.json

以下で起動する

>cd C:\Users\refirio\gulp-test
>npx gulp


Ctrl+C で終了できる

なお Visual Studio Code を使用している場合、
メニューの「ターミナル → 新しいターミナル」を開いてそこから実行すると、余計なウインドウが開かなくていい

★2020/11/12 ここまで再検証した
  series() で直列処理、parallel() で並列処理になるらしい
  gulp.task() で実行している箇所を、明示的にどちらかに指定するといいかも

■その他

以下も参考になりそう

VSCodeでGulpを実行しJavaScriptとSassをビルドしてBrowserSyncでライブプレビューする方法 - Qiita
https://qiita.com/KazuyoshiGoto/items/d00ccfcbc3d27c9eb3f6
Memo

Advertisement
