もくじ

Gulp4でSassコンパイル。変更監視、ファイル圧縮、リネーム、ソースマップ出力をする

ハウツー
コロのicon
コロ

入門編はこちら

ソースマップを出力する

const sassCompress = () => { return src(paths.styles.src, { sourcemaps: true, // init }) .pipe(sass({ outputStyle: "expanded" }).on("error", sass.logError)) .pipe( dest(paths.styles.dest, { sourcemaps: ".", // write }) ); } // { sourcemaps: "." } 同階層にsourcemap出力 // { sourcemaps: "./maps" } でmaps階層内にsourcemapを出力

ファイルの圧縮 *.minにリネームして出力

プラグインを追加

npm i --save-dev gulp-uglify gulp-rename gulp-plumber
gulp-plumber → タスクが強制停止することを防止
gulp-uglify → JSの圧縮
gulp-rename → ファイル名変更(.min用)

Scripts用のタスクを作成

const { src, dest, watch, series, parallel } = require("gulp"), sass = require("gulp-sass"), rename = require("gulp-rename"), uglify = require("gulp-uglify"), plumber = require("gulp-plumber"); // compilerにdart-sassを指定 sass.compiler = require("sass"); // pathを管理 const paths = { styles: { src: "./src/assets/sass/**/*.scss", dest: "./src/assets/css", }, // 追加したpath scripts: { src: "./src/assets/js/raw/**/*.js", dest: "./src/assets/js", }, }; const sassCompress = () => { // 省略 }; // 追加したScripts用のタスク const scriptsCompress = () => { return src(paths.scripts.src, { sourcemaps: true }) .pipe(plumber()) .pipe(uglify()) .pipe( rename({ suffix: ".min", }) ) .pipe(dest(paths.scripts.dest, { sourcemaps: "./maps" // 今回はmapsフォルダにsourcemapを出力 })); }; // 以下省略

Sass, Scripts複数のタスクを同時に監視したいとき

const { src, dest, watch, series, parallel } = require("gulp"), sass = require("gulp-sass"), rename = require("gulp-rename"), uglify = require("gulp-uglify"), plumber = require("gulp-plumber"); // compilerにdart-sassを指定 sass.compiler = require("sass"); // pathを管理 const paths = { styles: { src: "./src/assets/sass/**/*.scss", dest: "./src/assets/css", }, scripts: { src: "./src/assets/js/raw/**/*.js", dest: "./src/assets/js", }, }; const sassCompress = () => { return src(paths.styles.src, { sourcemaps: true, // init }) .pipe(sass({ outputStyle: "expanded" }).on("error", sass.logError)) .pipe( dest(paths.styles.dest, { sourcemaps: ".", // write }) ); }; const scriptsCompress = () => { return src(paths.scripts.src, { sourcemaps: true }) .pipe(plumber()) .pipe(uglify()) .pipe( rename({ suffix: ".min", }) ) .pipe(dest(paths.scripts.dest, { sourcemaps: "./maps" })); }; const w = () => { watch( [paths.styles.src, paths.scripts.src], // 監視したファイル or フォルダを配列で複数指定 parallel(sassCompress, scriptsCompress) // taskFunctionを指定 ); }; // task([taskName], taskFunction); task('default', sassCompress); task('sass', sassCompress); task('watch', w);

参考サイト

コロのicon
コロ
飼い猫と食べ物のことを考えてたら1日が終わってます。Reactでいろいろ作りたい