質問編集履歴

1 タイトル

dotQ

dotQ score 6

2017/04/16 18:12  投稿

【Gulp】mac環境でGulpがコンパイルされない、エラーメッセージなし
【Gulp】Gulpのコンパイルがwindowsだと動いてmacだと動きません
###前提・実現したいこと
Gulpでのコンパイル後のファイルが出力されない。
windows10の環境だと動作するが、MACに移動したらコンパイルされないです。
Macでも動作するようにしたいです。
環境設定が苦手な故、ご助言お願いいたしいです。
###発生している問題・エラーメッセージ
エラーメッセージ
なし
コンパイル後のファイルが出力されない
###該当のソースコード
gulpfile.js
```js
//gulp
var gulp = require('gulp');
//sass
var sass = require('gulp-sass');
//plumber
var plumber = require('gulp-plumber');
//pug
var pug = require('gulp-pug');
// path
var paths = {
'pug' : ['src/**/*.pug', '!src/**/_*.pug'],
'pugWach' : 'src/**/*.pug',
'sass' : 'src/Scss/**/*.scss',
'sassDist' : 'dist/css/',
'copy' : [ 'src/images/**', 'src/js/*.js'],
'dist' : 'dist/',
'url' : './src/url.pag'
}
//sass
gulp.task("sass", function() {
return gulp.src(paths.sass)
.pipe(plumber())
.pipe(sass())
.pipe(gulp.dest(paths.sassDist));
});
//pug
gulp.task('pug', function() {
return gulp.src(paths.pug)
//pretty: true 出力のコードを、改行をありにする
.pipe(pug({pretty: true}))
.pipe(gulp.dest(paths.dist));
});
gulp.task( 'copy', function() {
return gulp.src(
paths.copy,
{ base: 'src' }
)
.pipe(gulp.dest(paths.dist));
} );
//watch
gulp.task('default',['copy', 'pug', 'sass'], function(){
gulp.watch(paths.copy, function(e) {
console.log(e.path);
gulp.start('copy')
});
gulp.watch(paths.pugWach, function(e) {
console.log(e.path);
gulp.start('pug')
});
gulp.watch(paths.sass, function(e) {
console.log(e.path);
gulp.start('sass')
});
});
```
###試したこと
・フォルダ構成をシンプルにする
・npmのバージョンアップ
・npmのキャッシュのクリア
・nodebrewのバージョンアップ
・node.jsのバージョン切り替え(v6.10.2とv.7.2)
・gulp-debugでの結果は、全て 0 でした。
・wachでの変更ファイルのconsole.logは変更されたファイル名が取得できました。でもコンパイルされたファイルは出なかったです。
```js
gulp.watch(paths.pugWach, function(e) {
console.log(e.path);
gulp.start('pug')
});
```
・別プロジェクトとして、gulp-sassのみの物を作成しましたが、動作しなかったです。
・書籍からダウンロードしたgulpは動きました。
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
・環境
macOS Sierra 10.12.3
node v6.10.2
npm 4.5.0
nodebrew 0.9.6 (Homebrewでの管理していないです)
・ファイル階層
src
|--Pug_include
| |--_Alltemp.pug
|--Scss
| |--base
| | |--_base.scss
| |--layout
| | |--_footer.scss
| |--style.scss
|--images
| |--icon01.png
|--index.pug
|--js
| |--jquery-1.12.4.min.js
よろしくお願いいたします。
  • gulp

    478 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る