次のタグが付いている話題の回答:

5
Accepted

babelでトランスパイルをしても元ファイルとほぼ同じファイルが出力されてしまう

はい。あなたのgulpで、babelはきちんと動いています。 では、なぜ「あなたが求めている変換」は行われなかったのでしょうか。 まずはREADMEちゃんと読みましょうね。 https://www.npmjs.com/package/gulp-babel このサンプルにあるように、 .pipe(babel({ presets: ['es2015'] })) とすればes2015→...
hinaloe's user avatar
  • 4,691
4
Accepted

SyntaxError: Unexpected token -

Javascriptの関数名に使える記号は、ドル記号($)とアンダースコア(_)だけです。 マイナス記号(-)は使えません。 ところが、質問のコードでは function browser-sync() とマイナス記号が使われているので"Unexpected token -"(使われていないはずの記号 - が見つかりました)とのエラーが出たのです。 <修正案> function ...
Fumu 7's user avatar
  • 4,215
4

'node_modules' は、内部コマンドまたは外部コマンド、 操作可能なプログラムまたはバッチ ファイルとして認識されていません。

質問者です。すみません 結局windows なのが原因だったようで、package.jsonのpathのところにある” を\でエスケープしてみたところ解決したようです。 閲覧くださった方々、ありがとうございます。
user31705's user avatar
4
Accepted

gulpでbabelのタスクが繰り返し大量に実行されてしまう

ログからは、babel babeltrance babelwatch の3つのタスクが繰り返し実行されていることが読み取れます。これらのタスクを見てみましょう。 gulp.task('babeltrance', function() { gulp.src('dest-after/js/babel/*') .pipe(plumber()) .pipe(babel({ ...
unarist's user avatar
  • 1.5万
4
Accepted

gulp 意図したフォルダにsassがコンパイルされない

.pipe(gulp.dest(dest.root)) ではなく .pipe(gulp.dest('dest.root'))となっていることが原因です。
Faily Feely's user avatar
  • 2,873
3
Accepted

'default' errored after

以下のように gulpfile.js, package.json に対して修正を行います。 src 変数に root プロパティを追加します。 sass_style, watchFiles 関数内の src.scss を src.sass_style に修正します。 watchFiles, browser_sync 関数内に done 関数を記述します。 gulp-autoprefixer を ...
supa's user avatar
  • 5,241
3

gulp-rsync での同期時に error in rsync protocol data stream (code 12) が発生する

同期に伴うファイルやフォルダの作成にも適切な権限が必要です。 コピー先に指定している [email protected]:/var/www/yamatodaiwa.com ですが、 そもそも /var/www は一般的に root 以外のユーザーで書き込みができないようになっています。 例: $ ls -ld /var/www drwxr-xr-x 4 root root ...
cubick's user avatar
  • 2万
2

npm installでエラー

一度 node_modules/ を削除して、npm install し直してみるとどうでしょうか。 違う環境でインストールした際の残骸が残っていると、そのようなエラーが起きるような気がします。 参考 dyld: lazy symbol binding failed: Symbol not found: _node_module_register - Stack Overflow
unarist's user avatar
  • 1.5万
2

gulpfile.jsでアンダースコアのファイルも出力されてしまう

gulp.srcの引数はglobで処理されるので、頭に_が付くファイルを一律で処理の対象外としたい場合はシンプルに以下のように書けます。 gulp.task('jade', function() { gulp.src('./app/jade/**/!(_)*.jade') .pipe(plumber()) .pipe(jade({ pretty: true ...
noriaki's user avatar
  • 21
2

gulpfile.jsでアンダースコアのファイルも出力されてしまう

gulp.srcで!を使って取得したくないパスを指定します。 var gulp = require("gulp"); gulp.task("build", function() { gulp.src(["source/**/*", "!source/_**/*", "!source/**/_*"]) .pipe(gulp.dest("build")); }); ...
a10a's user avatar
  • 349
2
Accepted

gulpfile.js で BrowserSync を使用すると "is not a PostCSS plugin" というエラーが出る

Browser Sync は PostCSS のプラグインではないからです。 基本的には何のプラグインでもありません。 browser-sync モジュールは、開発用のサーバを作成する為の API と、単独で動作するコマンドの両方を提供します。 API は Gulp と協調して動作させるのに便利な機能があり、他のモジュールを介さずgulpfile.js で使用されますが、Gulp ...
mjy's user avatar
  • 1.2万
2
Accepted

gulpの自動圧縮を実行しないようにしたい。

その処理はbabelによって行なわれています。自動圧縮を行わないようにするには、babelのcompactオプションをfalseに設定します。 具体的には、gulp-babelを使用している以下の部分に書き加えます。 gulp.task('babeltrance', function() { gulp.src('./babel-before/*.js', ['babeltrance']) ...
Faily Feely's user avatar
  • 2,873
2
Accepted

autoprefixerでgridを有効にしているのにIE11でレイアウトが崩れる

Autoprefixer の grid オプションの true は、 no-autoplace の別名です。しかし、 true という表記は廃止予定になっているため、今後 Autoprefixer を導入する場合、使用するべきではありません。 Options Function autoprefixer(options) returns a new PostCSS plugin. ...
supa's user avatar
  • 5,241
1

macOS で gulp の環境構築時に .bashrc が見つからない

homeフォルダ内で .bash_profile のファイルは見つかりますが、 .bashrc のファイルが見つかりません。 その前に、最近のMacOSのターミナルでのデフォルトシェルはzshです。 環境変数SHELLの内容を確認してください。 ~ $ echo $SHELL /bin/zsh zshの場合、環境設定ファイルは、.zprofile、および、.zshrcになります。
endymion's user avatar
  • 349
1
Accepted

csscombの設定について。思ったように整形してくれません。

根本的な解決にはならないかもですが・・・ csscombで整形したあとに出力する前にgulp-sassでコンパイルしてあげると思う通りに整形されます。 var sass = require("gulp-sass"); gulp-sassを呼んであげて gulp.task('comb', function () { return gulp.src('./src-before/**/*.css'...
user20169's user avatar
1
Accepted

srcを変更したところなぜか反応しなくなりました。

・下記のようにしたところうまくいきました。 第二引数が足りなかった。 gulp.task('babeltrance', function() { gulp.src('./*.js', ['babeltrance']) .pipe(plumber()) .pipe(babel({ presets: ['es2015'], })) .pipe(gulp.dest('./babel-dest')); }...
nicomesecond's user avatar
1

gulp-sassを実行すると Invalid CSS のエラーが発生する

解決案① 拡張子をsassとして記載する場合は、インデントで調整して階層構造を表現してください。 html background:red; body background:blue; 解決案② 記載内容から"{}"を入れ子で書きたいのかと思います。その場合はファイルの拡張子をscssに変えてください。 style.sass -> style.scss ...
maot's user avatar
  • 1,012
1

Disconnected from BrowserSyncにすぐになってしまいます。

BrowserSyncのCSSリロードについては、毎回ページごとリロードするのではなく、ファイルの更新の際にCSSのみ差し替える事が可能です。 (browserSync.reloadはたしかBS上で開いているすべてのページをリロードしますよね。) BrowserSync初期化時のfilesオプションや、browserSync.streamを用いることでこれが可能です。 ...
hinaloe's user avatar
  • 4,691
1
Accepted

Disconnected from BrowserSyncにすぐになってしまいます。

こういう問題は難しいですね。 デバッグ作業のように原因を絞り込んでいくしかないと思います。 以下は直接の回答ではなく、作業の例です。 HTML を最低限の物にしてみる <!DOCTYPE html> <html> <head></head> <body> <h1>Test</h1> </body&...
mjy's user avatar
  • 1.2万
1
Accepted

autoprefixerを導入したのですが、エラーが出ます。

autoprefixer をreuireしてないため、ですね。 PostCSSのプラグインとして autoprefixer を使うのであれば gulp-autoprefixer ではなく autoprefixerの方になるかと思います。 各requireの最後あたりに var autoprefixer = require('autoprefixer'); を追加します。 ...
hinaloe's user avatar
  • 4,691
1
Accepted

cssnext から rem に自動で px を加える機能をなくしたい

端的には下記のようになります。 postcss([ cssnext({ features: { rem: false } }) ]) (例示コードは Gulp での利用を想定しています) cssnext の話なので、まずは cssnext のドキュメントをあたるのがよいです。 browsers ...
mjy's user avatar
  • 1.2万
1
Accepted

Gulp で起動した BrowserSync に出力先ディレクトリの更新時にもれなくリロードさせたい

gulp.watch("./dest/**/*").on('change', browserSync.reload); とりあえず、上記のように出力先ディレクトリ(browser-syncで提供するディレクトリ)全体をwatchするのはいかがでしょうか。 もちろん、ソースの方は下のように、また別に監視するという事で。 gulp.watch('./src/css/**/*.css', ["css"...
mjy's user avatar
  • 1.2万
1
Accepted

sourcemapsをpostcssで使うことはできないのでしょうか?

sourcemapsをpostcssで使うことはできないのでしょうか? 使用出来ます。 公式の README でも gulpの使用例では、gulp-sourcemapsが使われています。 https://github.com/postcss/postcss#gulp gulp.task('css', function () { var postcss = require('...
mjy's user avatar
  • 1.2万
1

RubyMine(もしくはJetBrains製品)でES6のブレイクポイントが機能しない

引用されているやり取りを読みましたが、gulp.src のことには特に触れられていないと思います。 挙がっている話としては、 規格に沿った sourcemap が生成され、それが .js ファイルから //@sourceMappingURL で正しく関連付けられていることが必要 WebStorm の babel file watcher を使えば期待通りにブレークポイントが機能したが、 ...
unarist's user avatar
  • 1.5万
1

gulp-sassでコンパイルすると@includeが使えず「no mixin named 」エラーが出る

@includeの後に@mixinを書いていました、コードは絶対あっていると思っていました… お騒がせしました。
るまし's user avatar
1

gulp-sassでのコンパイル時のエラーについて

gulp.src('./**/*.scss') この記述では、現在のディレクトリ以下の全てのscssファイルをコンパイル対象にしています。そのため、./node_modules/ 内にインストールされたNodeモジュールの、テスト用ファイルもコンパイルしてしまってします。 自分のプロジェクトのファイルをgulp-sassなどでコンパイルする場合は、...
unarist's user avatar
  • 1.5万
1

sassのブラウザへの自動反映について

予想ですが、 gulp server => watchしてないので更新されない gulp sass => 初期化してない(browser({OPTIONS}))のでreloadでエラー という状態になっているのかもしれません。GitHubに例がありますので参考にしてみてはいかがでしょうか。 https://github.com/Browsersync/recipes/tree/master/...
a10a's user avatar
  • 349
1

Angular2 で複数のTypeScriptファイルをひとつにまとめるには?

tsconfig.jsonで compilarOptionsのoutプロパティに出力先ファイル名を指定すればimportやrequireが解決されて結合された状態でコンパイルされます。
Suguru Inatomi's user avatar
1

Angular2 で複数のTypeScriptファイルをひとつにまとめるには?

TypeScript 1.8でAMDやsystemモジュールを1ファイルに結合できるようになるそうですが、現状まだ無理なので、moduleをcommonjsでコンパイルしbrowserifyを使うとまとめられます。 //tsconfig.json { "compilerOptions": { "target": "ES5", "module": "system", ... $ ...
zakki's user avatar
  • 2,024

Only top scored, non community-wiki answers of a minimum length are eligible