SassをGulp4で監視して自動コンパイルする
Gulpを弄るに先立っていろいろ検索して、例文をそのままコピペしても、正常に動かない場合が多いです。その理由として、Gulp4ではそれ以前と異なる構文があるからです。なので、実際僕が試行錯誤して生み出したGulp4で動く、『Sassファイルの変更を監視して、変更があれば .css と .min.css を生成するgulpfile.js』をここに置いておこうと思います。
// 実行環境
gulp -v
CLI version 2.0.1
Local version 4.0.0
Sassファイルの変更を監視して、変更があれば .css と .min.css を生成する gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var notify = require('gulp-notify');
var rename = require('gulp-rename');
var cleanCSS = require('gulp-clean-css');
// Sassをコンパイルするタスクの設定
gulp.task("css", function () {
return gulp.src('node_modules/bootstrap/scss/*.scss')// コンパイル対象のSassファイル
.pipe(sass()) // コンパイル実行
.pipe(autoprefixer()) // ベンダープレフィックスの付与
.pipe(gulp.dest('node_modules/bootstrap/dist/css')); // 出力
});
// .min.cssを生成するタスクの設定
gulp.task("mincss", function () {
return gulp.src('node_modules/bootstrap/dist/css/bootstrap.css')//上のタスクで出力したcssファイル
.pipe(cleanCSS()) // cssを圧縮
.pipe(rename({extname:'.min.css'})) // 名前を.min.cssにする
.pipe(gulp.dest('node_modules/bootstrap/dist/css')) // 出力
.pipe(notify({
title: 'bootstrap.cssとbootstrap.min.cssをコンパイルしました。',
message: new Date(),
sound: 'Pop',
icon: 'icon.png' // 適当なアイコンを追加してみてください
}));
});
gulp.task("default", function () {
// scssフォルダを監視し、変更があったらコンパイルする
gulp.watch('node_modules/bootstrap/scss/*.scss',gulp.series('css', 'mincss'));
});
それぞれのプラグインは事前にインストールしておいてください。
$ npm install --save-dev gulp-sass
$ npm install --save-dev gulp-autoprefixer
$ npm install --save-dev gulp-notify
$ npm install --save-dev gulp-rename
$ npm install --save-dev gulp-clean-css
Gulpのインストール等は以下の記事をご参照ください。
・Bootstrap 4のCSSコンパイルをGulpで管理する方法
この記事がお役に立てれば幸いです。ご指摘等はお気軽にお願いします。
Author And Source
この問題について(SassをGulp4で監視して自動コンパイルする), 我々は、より多くの情報をここで見つけました https://qiita.com/Michinosuke/items/11908fd276d1794aedeb著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .