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

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

ただいまの
回答率

90.35%

  • gulp

    358questions

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

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,748
退会済みユーザー

退会済みユーザー

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

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

0

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

.pipe(postcss([
  postcssimport(),
  cssnext()
]))


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

下記のようにただ追加すればよいのではないのでしょうか? 
.pipe(postcssimport()) 
.pipe(postcss()) 
.pipe(cssnext())

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/08/10 09: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 09: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']);//監視したいファイルの相対パス
    });

    キャンセル

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

  • ただいまの回答率 90.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

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

  • gulp

    358questions

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