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

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

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

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

Q&A

0回答

3247閲覧

csscombをgulpで使おうとしたのですが Error: Cannot find module 'gulp-csscomb'とでて使えません。

退会済みユーザー

退会済みユーザー

総合スコア0

gulp

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

0グッド

0クリップ

投稿2016/07/31 03:27

csscombをgulpで使おうとしたのですが
Error: Cannot find module 'gulp-csscomb'とでて使えません。

また、「csscomb.json」「yandex.json」「zen.json」と三つ選択肢がありますが、
現場ではどれが主流ですか?

//gulpfile.js var gulp = require('gulp'); //gulpをインポート var postcssimport = require('postcss-import'); 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 plumber = require('gulp-plumber');//うまくいっていない。gulpのwatchが止まらないようにする var flexbugs = require('postcss-flexbugs-fixes');//フレックスボックスのバグ解消http://ameblo.jp/ca-1pixel/entry-12086383139.htmlより var bem = require('postcss-bem');//うまくいっていない var csscomb = require('gulp-csscomb'); gulp.task('css', function () { //”css”タスクを登録 var plugins = [ postcssimport, cssnext, //一旦空の配列を作成 nested, reporter, calc, // csswring, // customProperties, customMedia, plumber, flexbugs, bem, csscomb ]; 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']);//監視したいファイルの相対パス });

*npm install csscomb

C:\Users\usr\Desktop\images\gulp-folder\postcss>npm install csscomb npm WARN deprecated minimatch@0.2.12: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue postcss@1.0.0 C:\Users\usr\Desktop\images\gulp-folder\postcss `-- postcss-custom-media@5.0.1 npm WARN postcss@1.0.0 No description npm WARN postcss@1.0.0 No repository field. ```ここに言語を入力 ```ここに言語を入力 C:\Users\usr\Desktop\images\gulp-folder\postcss>gulp watch (node:4268) 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. module.js:442 throw err; ^ Error: Cannot find module 'gulp-csscomb' at Function.Module._resolveFilename (module.js:440:15) at Function.Module._load (module.js:388:25) at Module.require (module.js:468:17) at require (internal/module.js:20:19) at Object.<anonymous> (C:\Users\usr\Desktop\images\gulp-folder\postcss\gulpfile.js:15:15) at Module._compile (module.js:541:32) at Object.Module._extensions..js (module.js:550:10) at Module.load (module.js:458:32) at tryModuleLoad (module.js:417:12) at Function.Module._load (module.js:409:3) at Module.require (module.js:468:17) at require (internal/module.js:20:19) at Liftoff.handleArguments (C:\Users\usr\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:116:3) at Liftoff.<anonymous> (C:\Users\usr\AppData\Roaming\npm\node_modules\gulp\node_modules\liftoff\index.js:193:16) at module.exports (C:\Users\usr\AppData\Roaming\npm\node_modules\gulp\node_modules\flagged-respawn\index.js:17:3) at Liftoff.<anonymous> (C:\Users\usr\AppData\Roaming\npm\node_modules\gulp\node_modules\liftoff\index.js:185:9)
*csscomb -v ```ここに言語を入力 C:\Users\usr\Desktop\images\gulp-folder\postcss>csscomb -v No input paths specified Usage: csscomb [options] <file ...> Options: -h, --help output usage information -V, --version output the version number -v, --verbose verbose mode -c, --config [path] configuration file path -d, --detect detect mode (would return detected options) -l, --lint in case some fixes needed returns an error

*csscomb.js>>ファイル名.csscomb.jsonこれはgulp.jsのカレントディレクトリにあります「。

{ "exclude": [ ".git/**", "node_modules/**", "bower_components/**" ], "sort-order": [ [ "position", "z-index", "top", "right", "bottom", "left" ], [ "display", "visibility", "float", "clear", "overflow", "overflow-x", "overflow-y", "-ms-overflow-x", "-ms-overflow-y", "-webkit-overflow-scrolling", "clip", "zoom", "flex-direction", "flex-order", "flex-pack", "flex-align", "flex" ], [ "-webkit-box-sizing", "-moz-box-sizing", "box-sizing", "width", "min-width", "max-width", "height", "min-height", "max-height", "margin", "margin-top", "margin-right", "margin-bottom", "margin-left", "padding", "padding-top", "padding-right", "padding-bottom", "padding-left" ], [ "table-layout", "empty-cells", "caption-side", "border-spacing", "border-collapse", "list-style", "list-style-position", "list-style-type", "list-style-image" ], [ "content", ~ ] ] }

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問