質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
EJS

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

コンパイル

コンパイルとは、プログラミング言語のテキストソース(ソースコード)をコンピュータ上で実行可能な形式(オブジェクトコード)に変換することをいいます

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

Q&A

0回答

1699閲覧

gulp4でejs、scssファイルを編集したとき再コンパイルができない

kendo_love

総合スコア2

EJS

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

コンパイル

コンパイルとは、プログラミング言語のテキストソース(ソースコード)をコンピュータ上で実行可能な形式(オブジェクトコード)に変換することをいいます

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

0グッド

0クリップ

投稿2019/09/22 09:55

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

ご教示のほどよろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問