戻る
■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