下記を使わせてもらいgulpの環境を構築したいのですがエラーがでます。
http://steelydylan.github.io/gulp-generator/#
C:\Users\user\Desktop\images\gulp-folder\website\リサイクル会社のサイト - コピー>gulp watch (node:4768) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version. [12:15:33] Using gulpfile ~\Desktop\images\gulp-folder\website\リサイクル会社のサイト - コピー\gulpfile.js [12:15:33] Starting 'watch'... [12:15:33] Finished 'watch' after 213 ms [12:15:38] Starting 'css'... [12:15:39] 'css' errored after 46 ms [12:15:39] TypeError: dest.on is not a function at DestroyableTransform.Readable.pipe (C:\Users\user\Desktop\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:485:8) at DestroyableTransform.pipe2 (C:\Users\user\Desktop\node_modules\gulp-plumber\index.js:70:14) at Gulp.<anonymous> (C:\Users\user\Desktop\images\gulp-folder\website\リサイクル会社のサイト - コピー\gulpfile.js:23:10) at module.exports (C:\Users\user\Desktop\images\gulp-folder\node_modules\orchestrator\lib\runTask.js:34:7) at Gulp.Orchestrator._runTask (C:\Users\user\Desktop\images\gulp-folder\node_modules\orchestrator\index.js:273:3) at Gulp.Orchestrator._runStep (C:\Users\user\Desktop\images\gulp-folder\node_modules\orchestrator\index.js:214:10) at Gulp.Orchestrator.start (C:\Users\user\Desktop\images\gulp-folder\node_modules\orchestrator\index.js:134:8) at Gulp.<anonymous> (C:\Users\user\Desktop\images\gulp-folder\node_modules\gulp\index.js:36:18) at Gaze.<anonymous> (C:\Users\user\Desktop\images\gulp-folder\node_modules\glob-watcher\index.js:18:14) at emitTwo (events.js:106:13) at Gaze.emit (events.js:191:7) at Gaze.emit (C:\Users\user\Desktop\images\gulp-folder\node_modules\gaze\lib\gaze.js:129:32) at C:\Users\user\Desktop\images\gulp-folder\node_modules\gaze\lib\gaze.js:415:16 at StatWatcher._pollers.(anonymous function) (C:\Users\user\Desktop\images\gulp-folder\node_modules\gaze\lib\gaze.js:326:7) at emitTwo (events.js:106:13) at StatWatcher.emit (events.js:191:7)
・gulp.js
下記三つのみ自分で追加しました。追加前はうまく動いていました。
var postcssimport = require('postcss-import');
var postcss = require('gulp-postcss'); //gulp-postcssをインポート
var cssnext = require('postcss-cssnext'); //cssnextをインポート
・
var gulp = require('gulp'); var plumber = require('gulp-plumber'); var postcssimport = require('postcss-import'); var postcss = require('gulp-postcss'); //gulp-postcssをインポート var cssnext = require('postcss-cssnext'); //cssnextをインポート var rename = require('gulp-rename'); var csslint = require('gulp-csslint'); var autoPrefixer = require('gulp-autoprefixer'); //if node version is lower than v.0.1.2 require('es6-promise').polyfill(); var cssComb = require('gulp-csscomb'); var cmq = require('gulp-merge-media-queries'); var cleanCss = require('gulp-clean-css'); gulp.task('css',function(){ gulp.src(['css/src/**/*.css']) .pipe(plumber({ handleError: function (err) { console.log(err); this.emit('end'); } })) .pipe(autoPrefixer()) .pipe(postcssimport()) .pipe(postcss()) .pipe(cssnext()) .pipe(cssComb()) .pipe(cmq({log:true})) .pipe(csslint()) .pipe(csslint.reporter()) .pipe(gulp.dest('css/dist')) .pipe(rename({ suffix: '.min' })) .pipe(cleanCss()) .pipe(gulp.dest('css/dist')) }); gulp.task('js',function(){ gulp.src(['js/src/**/*.js']) .pipe(plumber({ handleError: function (err) { console.log(err); this.emit('end'); } })) .pipe(gulp.dest('js/dist')) }); gulp.task('html',function(){ gulp.src(['html/**/*.html']) .pipe(plumber({ handleError: function (err) { console.log(err); this.emit('end'); } })) .pipe(gulp.dest('./')) }); //以下gulp-watch gulp.task('watch', function(){ gulp.watch(['src-recycling-corpolate/*' , 'src-recycling-corpolate/*/*' , 'src-recycling-corpolate/*/*/*'], ['css']);//監視したいファイルの相対パス });
・gulpは難しくて書き方がよくわかりません。
下記のようにただ追加すればよいのではないのでしょうか?
.pipe(postcssimport())
.pipe(postcss())
.pipe(cssnext())
・その後下記のように変更して、gulpwatchは問題なく動いているのですがapp.cssが生成されません。
var gulp = require('gulp'); var plumber = require('gulp-plumber'); var postcssimport = require('postcss-import'); var postcss = require('gulp-postcss'); //gulp-postcssをインポート var cssnext = require('postcss-cssnext'); //cssnextをインポート var rename = require('gulp-rename'); var csslint = require('gulp-csslint'); var autoPrefixer = require('gulp-autoprefixer'); //if node version is lower than v.0.1.2 require('es6-promise').polyfill(); var cssComb = require('gulp-csscomb'); var cmq = require('gulp-merge-media-queries'); var cleanCss = require('gulp-clean-css'); gulp.task('css',function(){ gulp.src(['dest-recycling-corpolate/css/*.css']) .pipe(plumber({ handleError: function (err) { console.log(err); this.emit('end'); } })) .pipe(postcss([ postcssimport(), cssnext() ])) .pipe(autoPrefixer()) .pipe(cssComb()) .pipe(cmq({log:true})) .pipe(csslint()) .pipe(csslint.reporter()) .pipe(gulp.dest('dest-recycling-corpolate/css')) .pipe(rename({ suffix: '.min' })) .pipe(cleanCss()) .pipe(gulp.dest('dest-recycling-corpolate/css')) }); gulp.task('js',function(){ gulp.src(['js/src/**/*.js']) .pipe(plumber({ handleError: function (err) { console.log(err); this.emit('end'); } })) .pipe(gulp.dest('js/dist')) }); gulp.task('html',function(){ gulp.src(['html/**/*.html']) .pipe(plumber({ handleError: function (err) { console.log(err); this.emit('end'); } })) .pipe(gulp.dest('./')) }); //以下gulp-watch gulp.task('watch', function(){ gulp.watch(['src-recycling-corpolate/*' , 'src-recycling-corpolate/*/*' , 'src-recycling-corpolate/*/*/*'], ['css']);//監視したいファイルの相対パス });
・下記が環境です。
C:.
├─dest-recycling-corpolate
│ ├─css
│ │ ├─foundation
│ │ ├─layout
│ │ └─object
│ │ ├─component
│ │ ├─project
│ │ └─utility
│ ├─html
│ ├─img
│ │ ├─common-img
│ │ └─index
│ ├─plugin
│ └─web-font
下記はgulp.jsをカレントディレクトリとして相対パスを指定すればいいのですよね。
gulp.src(['html/**/.html'])これはまだ書き直していない
.pipe(gulp.dest('dest-recycling-corpolate/css'))
gulp.src(['dest-recycling-corpolate/css/.css'])
・最後にVinylオブジェクトを返すものと返さないもので記述の仕方を変えないといけないようですが、どう区別するのでしょうか。
そこまで来ると正直よくわかりません。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/08/10 00:10
退会済みユーザー
2016/08/10 00:16