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

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

ただいまの
回答率

90.51%

  • JavaScript

    19307questions

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

  • Sass

    316questions

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

  • gulp

    316questions

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

gulpでsassがコンパイルされない

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,482

hibikikudo

score 206

前提・実現したいこと

gulpを用い、sassをcssにコンパイルするタスクを実行する際に正しくコンパイルされない不具合が発生しました。

発生している問題・エラーメッセージ

  • src/scss直下のstyle.scssを更新した場合は、正常にコンパイルされるが
  • src/scss/core, src/scss/layout, src/scss/module配下のscssファイルを更新しても、/dist/css/style.cssが更新されない(画面リロードは正常にする)。
  • またその際ターミナル画面にエラーメッセージ等は出ない

該当のソースコード

/***************************************************************************
* gulpfile.js
***************************************************************************/
/***************************************************************************
* DEPENDENCIES
***************************************************************************/

var gulp         = require('gulp'),
    autoprefixer = require('gulp-autoprefixer'),
    browserSync  = require('browser-sync'),
    concat       = require('gulp-concat'),
    plumber      = require('gulp-plumber'),
    reload       = browserSync.reload,
    rename       = require('gulp-rename'),
    gulp_sass     = require('gulp-sass'),
    cache        = require('gulp-cached'),
    csscomb      = require('gulp-csscomb'),
    uglify       = require('gulp-uglify')
;

/***************************************************************************
* FILE DESTINATIONS
***************************************************************************/

var paths = {
  'dest'      : './',
  'vhost'     : 'example.dev',
  'port'      : 3000,
// html
  'htmlDest'  : './',
  'htmlFiles' : './*.html',
// images
  'imgDest'   : 'dist/img',
  'imgDir'    : 'src/img',
// js
  'jsFiles'   : 'src/js/**/*.js',
  'jsDest'    : 'dist/js',
// scss
  'scssDest'  : 'src/scss',
  'scssFiles' : 'src/scss/**/*.scss',
// css
  'cssDest'   : 'dist/css'
};

// Static server
gulp.task('browser-sync', function() {
  browserSync({
    server: {
      baseDir: paths.dest
    },
    startPath: paths.htmlDest
  });
});

// Reload all browsers
gulp.task('bs-reload', function() {
  browserSync.reload();
});

/***************************************************************************
* image tasks
***************************************************************************/

/***************************************************************************
* js tasks
***************************************************************************/

gulp.task('jsLib', function() {
  return gulp.src(paths.jsFiles)
    .pipe(concat('lib.js'))
    .pipe(uglify())
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest(paths.jsDest))
    .pipe(browserSync.reload({ stream: true }));
});

/***************************************************************************
* Sass tasks
***************************************************************************/

gulp.task('gulp_sass', function () {
    gulp.src(paths.scssFiles)
        .pipe(cache( 'sass' ))
        .pipe(plumber())
        .pipe(gulp_sass({
          r: 'sass-globbing',
          'sourcemap=none': true
        }))
        .pipe(csscomb())
        .pipe(autoprefixer("last 2 version"))
        //.pipe(gulp.dest(paths.cssDest))
    .pipe(gulp.dest('dist/css'))
        .pipe(reload({ stream: true }));
});
/***************************************************************************
* gulp tasks
***************************************************************************/

gulp.task('watch', function() {
  gulp.watch([paths.htmlFiles], ['bs-reload']).on('change', reload);
  gulp.watch([paths.jsDest], ['jsLib']).on('change', reload);
  gulp.watch([paths.scssFiles], ['gulp_sass']).on('change', reload);
});

gulp.task('default', [
    'browser-sync',
    'gulp_sass',
    'bs-reload',
    'jsLib',
    'watch'
]);
@charset "utf-8";
// ========================================
// core files
// ========================================
@import 'core/config';
@import 'core/mixins';
@import 'core/normalize';

// ========================================
// modules 
// ========================================
@import 'module/module-buttons'; 
@import 'module/module-sprite';
@import 'module/scroller';
@import 'module/navbar';
@import 'module/drawer';
// ======================================== 
// layouts
// ========================================
@import 'layout/grid';
@import 'layout/layout-common';
@import 'layout/layout-footer';
@import 'layout/layout-header';
@import 'layout/layout-top';

 フォルダ構成

フォルダ構成

試したこと

  • vender-prefix除去→効果なし
  • gulp-ruby-sassをgulp-sassに変更→効果なし
  • 不要プラグインをコメントアウト→効果なし
  • package.jsonで全てのプラグインのヴァージョンをlatest指定→効果なし
  • watchタスク部を以下のように書き換え→効果なし
gulp.task('watch', ['gulp_sass'], function(){
 var watcher = gulp.watch('./src/sass/**/*.scss', ['gulp_sass']);
 watcher.on('change', function(event) {
   console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
 });
});

補足情報(言語/FW/ツール等のバージョンなど)

OS X El Capitan v10.11.6 
node.js v6.9.2 

全く原因がつかめず困っております。何卒よろしくお願いいたします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

下記のような指定を試しても改善しないでしょうか?

// 修正前
gulp.watch('./src/sass/**/*.scss', ...);

// 配列で渡す形にする
gulp.watch(['./src/sass/**/*.scss'], ...);

// 明示的に指定してみる
gulp.watch(['./src/sass/**/*.scss', './src/sass/module/*.scss'], ...);

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • JavaScript

    19307questions

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

  • Sass

    316questions

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

  • gulp

    316questions

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