gulp実行中、ejs、scssファイルをそれぞれ編集し保存したときにコンパイルされなくて困っています。
なお、コマンドプロトコルで「gulp」を初めて実行したときはファイルがコンパイルされます。
gulpfile.jsの中身は次の通りです。
javascript
1var gulp = require('gulp'); 2var sass = require('gulp-sass'); 3var pleeease = require('gulp-pleeease'); 4var ejs = require("gulp-ejs"); 5var plumber = require('gulp-plumber'); 6var notify = require('gulp-notify'); 7var rename = require('gulp-rename'); 8var changed = require('gulp-changed'); 9var browserSync = require('browser-sync'); 10var plumber = require('gulp-plumber'); 11 12/* =================================== 13 * 設定 14 * =================================== */ 15var PleeeaseOptions = { 16 autoprefixer: AUTOPREFIXER_BROWSERS, // ベンダープレフィックスの付与( Autoprefixer ) 17 rem: ["10px"], // 1rem = 10px 18 opacity: false, // IE8 のための opacity filter を追加 19 minifier: false, // minify 無効 20 mqpacker: true, // メディアクエリの整理( pack ) 21 filters: true 22}; 23var AUTOPREFIXER_BROWSERS = [ 24 'ie >= 11', 25 'ff >= 30', 26 'chrome >= 34', 27 'safari >= 7', 28 'opera >= 23', 29 'ios >= 8', 30 'android >= 4.4' 31]; 32var paths = { 33 'base': '_dev/**', 34 'dstDir': 'public' 35}; 36var CSSOptions = { 37 outputStyle: 'compressed'//compressed,expanded,compact 38}; 39 40 41//sass 42gulp.task("sass", function() { 43 return gulp.src(paths.base + '/*.scss', { base: '_src' }) 44 .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")})) 45 .pipe(sass(CSSOptions)) 46 .pipe(pleeease(PleeeaseOptions)) 47 .pipe(gulp.dest('public')) 48}); 49//ejs 50gulp.task("ejs", function(done) { 51 return gulp.src([paths.base + '/!(_)*.ejs'], { base: '_src' }) 52 .pipe(ejs()) 53 .pipe(rename({extname: '.html'})) // 拡張子をhtmlへ 54 .pipe(gulp.dest('public')) 55 done(); 56}); 57// browserSync 58gulp.task("browserSync", function () { 59 browserSync({ 60 server: { 61 baseDir: "public" // ルートとなるディレクトリを指定 62 } 63 }); 64 gulp.watch('public/**/*.html', gulp.parallel('liveReload')); 65 gulp.watch('public/**/*.css', gulp.parallel('liveReload')); 66 gulp.watch('public/**/*.js', gulp.parallel('liveReload')); 67}); 68// liveReload 69gulp.task('liveReload', function() { 70 browserSync.reload(); 71}); 72// _srcの中身をコピー 73gulp.task('copy', function(done) { 74 gulp.src( 75 [ 76 '_dev/**/*', 77 '!_dev/**/*.ejs', 78 '!_dev/**/*.scss', 79 '!_dev/_**/*', 80 '!_dev/**/_*' 81 ], { base: '_dev' } 82 ) 83 .pipe(changed('public')) 84 .pipe(gulp.dest('public')); 85 done(); 86}); 87// watch 88gulp.task('watch', function(done) { 89 gulp.watch(paths.base + '/*.scss', gulp.task('sass')); 90 gulp.watch(paths.base + '/*.ejs', gulp.task('ejs')); 91 done(); 92}); 93 94gulp.task('default', gulp.series('sass', 'ejs', 'copy', 'watch', 'browserSync'));
gulpを動かしている環境はWindows10で、gulp、Node.js、npmのバージョンは次の通りです。
gulp -> 4.0.2
Node.js -> 10.16.2
npm -> 6.9.0
ご教示のほどよろしくお願いいたします。
あなたの回答
tips
プレビュー