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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

gulp

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

Q&A

0回答

1015閲覧

gulpのwatchタスクについて

chiricode

総合スコア16

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

gulp

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

0グッド

0クリップ

投稿2019/01/29 05:41

gulp環境を作成しています。
下記gulpfileにて、watchタスクを実行後、SCSSの初回の変更はビルドされるのですが、それ以降SCSSファイルを変更してもビルドされない状態となっています。

※watchは常に起動状態です。

みなさまの知見をお貸しください。
よろしくお願いいたします。

gulpfile.js

1// PLUGIN|MODULES 2const gulp = require('gulp'); 3const webserver = require('gulp-webserver'); 4const rename = require("gulp-rename"); 5const changed = require('gulp-changed'); 6// browser-sync 7 8// PLUGIN|CSS 9const sass = require('gulp-sass'); 10const sassGlob = require( 'gulp-sass-glob' ); 11const sourcemaps = require("gulp-sourcemaps"); 12const autoprefixer = require('gulp-autoprefixer'); 13const cleanCSS = require('gulp-clean-css'); 14// PLUGIN|HTML 15const ejs = require('gulp-ejs'); 16const minifyHTML = require('gulp-minify-html'); 17// PLUGIN|JS 18const uglify = require('gulp-uglify'); 19// SETTING 20var dist = './dist/'; 21var srcmap = './map/'; 22var src = './src/'; 23 24// CSS================================= 25gulp.task('scss', () => { 26 gulp.src(src + 'scss/*.scss') 27 .pipe(sassGlob()) 28 .pipe(sourcemaps.init()) 29 .pipe(sass({sourcemap: true})) 30 .pipe(rename({extname: '.min.css'})) 31 .pipe(autoprefixer({browsers: ['last 2 version', 'iOS >= 8.1', 'Android >= 4.4'],cascade: false})) 32 // .pipe(cleanCSS()) 33 .pipe(sourcemaps.write(srcmap)) 34 .pipe(gulp.dest(dist + 'css/')); 35}); 36 37// JS================================= 38gulp.task('js', () => { 39 gulp.src(src + 'js/*.js') 40 .pipe(uglify()) 41 .pipe(rename({extname: '.min.js'})) 42 .pipe(gulp.dest(dist + 'js/')); 43}); 44 45// HTML================================= 46gulp.task('html', () => { 47 gulp.src([src + "html/*.ejs", 48 src + "html/**/*.ejs", 49 "!" + src + "html/_include/_*.ejs"]) 50 .pipe(ejs()) 51 .pipe(rename({ extname: '.html' })) 52 .pipe(gulp.dest(dist)) 53}); 54 55// LOCAL SERVER 56gulp.task('webserver', () => { 57 gulp.src('dist').pipe(webserver({ 58 livereload: true, 59 open: true, 60 port: 9999 61 })); 62}); 63 64// BUILD 65gulp.task("build", 66 gulp.series( 67 gulp.parallel("scss", "html", "js") 68 ) 69); 70 71//WATCH 72gulp.task('watch', () => { 73 gulp.watch(src + 'scss/**/*.scss', gulp.task('scss')); 74 gulp.watch(src + 'js/**/*.js', gulp.task('js')); 75 gulp.watch(src + 'html/**/*.ejs', gulp.task('html')); 76}); 77 78gulp.task("default", 79 gulp.series( 80 gulp.parallel("watch", "webserver", "build") 81 ) 82);

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問