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

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

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

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

Q&A

解決済

1回答

6500閲覧

下記を使わせてもらいgulpの環境を構築したいのですがエラーがでます。

退会済みユーザー

退会済みユーザー

総合スコア0

gulp

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

0グッド

0クリップ

投稿2016/08/09 03:22

編集2016/08/15 02:08

下記を使わせてもらい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オブジェクトを返すものと返さないもので記述の仕方を変えないといけないようですが、どう区別するのでしょうか。
そこまで来ると正直よくわかりません。

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

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

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

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

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

guest

回答1

0

ベストアンサー

gulp-postcssのgithubページにusageが載っています。
当方postcssは使用したことがありませんが、
gulp-postcssで postcssimportとcssnextを利用したいのであれば、

JavaScript

1.pipe(postcss([ 2 postcssimport(), 3 cssnext() 4]))

上記のように修正することで利用可能ではないかと思います。

下記のようにただ追加すればよいのではないのでしょうか?

.pipe(postcssimport())
.pipe(postcss())
.pipe(cssnext())

あくまでcss importやcssnextはpostcssのパッケージのようですし、
そもそもそれらはVinylオブジェクトを返さないのでpipeで繋げられません。
gulpタスクを自作したいのであれば、ある程度ストリームというものをを理解する必要があります。

投稿2016/08/09 14:08

fee

総合スコア71

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

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

退会済みユーザー

退会済みユーザー

2016/08/10 00:10

ありがとうございます。 nodeでできているので、むずかしくてよくわかりませんね。 下記のようにしたのですがそれでもエラーが出ます。 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(postcss([ postcssimport(), cssnext() ])) .pipe(autoPrefixer()) .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']);//監視したいファイルの相対パス });
退会済みユーザー

退会済みユーザー

2016/08/10 00:16

Vinylオブジェクトを返すものと返さないもので記述の仕方を変えないといけないのですね。 そこまで来ると正直よくわかりません。 下記のように前は記載していたのですが、 こちらは、csscombやpostcss-custom-mediaなどがうまくうごきません。 返してくれるものはかきのような記載ではいけないということなのですかね。 区別と記載方法がわかればそのようにします。 //gulpfile.js var gulp = require('gulp'); //gulpをインポート var postcssimport = require('postcss-import'); var plumber = require('gulp-plumber');//うまくいっていない。gulpのwatchが止まらないようにする var postcss = require('gulp-postcss'); //gulp-postcssをインポート var cssnext = require('postcss-cssnext'); //cssnextをインポート var nested = require('postcss-nested'); var reporter = require('postcss-reporter'); //stylelintだけだとレポートが出力されない為 // var csswring = require('csswring'); var calc = require('postcss-calc'); var customProperties = require("postcss-custom-properties"); // var customMedia = require("postcss-custom-media"); //うまくいっていない。カスタムメディアクエリーズが使える var flexbugs = require('postcss-flexbugs-fixes');//フレックスボックスのバグ解消http://ameblo.jp/ca-1pixel/entry-12086383139.htmlより // var csscomb = require('gulp-csscomb'); var bem = require('postcss-bem');//うまくいっていない gulp.task('css', function () { //”css”タスクを登録 var plugins = [ postcssimport, plumber, cssnext, //一旦空の配列を作成 nested, reporter, calc, // csswring, // customProperties, // customMedia, flexbugs, // csscomb, bem ]; console.log( Array.isArray(plugins) );//pluginsの定義の後で、 !Array.isArray(plugins)の値がどうなってるかをログを取る為 return gulp.src( ['./src-before/*' , './src-before/*/*'], { base: 'src-before' }) //src-before下にある.cssファイルを指定 .pipe(postcss(plugins)) //PostCSSにファイルを処理してもらう .pipe(gulp.dest('./dest-after/css')); //生成されたCSSをdest-after下に配置 }); //以下gulp-watch gulp.task('watch', function(){ gulp.watch(['src-before/*' , 'src-before/*/*' , 'src-before/*/*/*'], ['css']);//監視したいファイルの相対パス });
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問