5
票
Accepted
babelでトランスパイルをしても元ファイルとほぼ同じファイルが出力されてしまう
はい。あなたのgulpで、babelはきちんと動いています。
では、なぜ「あなたが求めている変換」は行われなかったのでしょうか。
まずはREADMEちゃんと読みましょうね。
https://www.npmjs.com/package/gulp-babel
このサンプルにあるように、
.pipe(babel({
presets: ['es2015']
}))
とすればes2015→...
4
票
Accepted
SyntaxError: Unexpected token -
Javascriptの関数名に使える記号は、ドル記号($)とアンダースコア(_)だけです。
マイナス記号(-)は使えません。
ところが、質問のコードでは
function browser-sync()
とマイナス記号が使われているので"Unexpected token -"(使われていないはずの記号 - が見つかりました)とのエラーが出たのです。
<修正案>
function ...
4
票
'node_modules' は、内部コマンドまたは外部コマンド、 操作可能なプログラムまたはバッチ ファイルとして認識されていません。
質問者です。すみません
結局windows なのが原因だったようで、package.jsonのpathのところにある” を\でエスケープしてみたところ解決したようです。
閲覧くださった方々、ありがとうございます。
4
票
Accepted
gulpでbabelのタスクが繰り返し大量に実行されてしまう
ログからは、babel babeltrance babelwatch の3つのタスクが繰り返し実行されていることが読み取れます。これらのタスクを見てみましょう。
gulp.task('babeltrance', function() {
gulp.src('dest-after/js/babel/*')
.pipe(plumber())
.pipe(babel({
...
4
票
Accepted
gulp 意図したフォルダにsassがコンパイルされない
.pipe(gulp.dest(dest.root)) ではなく .pipe(gulp.dest('dest.root'))となっていることが原因です。
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 を ...
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 ...
2
票
npm installでエラー
一度 node_modules/ を削除して、npm install し直してみるとどうでしょうか。
違う環境でインストールした際の残骸が残っていると、そのようなエラーが起きるような気がします。
参考 dyld: lazy symbol binding failed: Symbol not found: _node_module_register - Stack Overflow
2
票
gulpfile.jsでアンダースコアのファイルも出力されてしまう
gulp.srcの引数はglobで処理されるので、頭に_が付くファイルを一律で処理の対象外としたい場合はシンプルに以下のように書けます。
gulp.task('jade', function() {
gulp.src('./app/jade/**/!(_)*.jade')
.pipe(plumber())
.pipe(jade({
pretty: true
...
2
票
gulpfile.jsでアンダースコアのファイルも出力されてしまう
gulp.srcで!を使って取得したくないパスを指定します。
var gulp = require("gulp");
gulp.task("build", function() {
gulp.src(["source/**/*", "!source/_**/*", "!source/**/_*"])
.pipe(gulp.dest("build"));
});
...
2
票
Accepted
gulpfile.js で BrowserSync を使用すると "is not a PostCSS plugin" というエラーが出る
Browser Sync は PostCSS のプラグインではないからです。
基本的には何のプラグインでもありません。
browser-sync モジュールは、開発用のサーバを作成する為の API と、単独で動作するコマンドの両方を提供します。
API は Gulp と協調して動作させるのに便利な機能があり、他のモジュールを介さずgulpfile.js で使用されますが、Gulp ...

mjy♦
- 1.2万
2
票
Accepted
gulpの自動圧縮を実行しないようにしたい。
その処理はbabelによって行なわれています。自動圧縮を行わないようにするには、babelのcompactオプションをfalseに設定します。
具体的には、gulp-babelを使用している以下の部分に書き加えます。
gulp.task('babeltrance', function() {
gulp.src('./babel-before/*.js', ['babeltrance'])
...
2
票
Accepted
autoprefixerでgridを有効にしているのにIE11でレイアウトが崩れる
Autoprefixer の grid オプションの true は、 no-autoplace の別名です。しかし、 true という表記は廃止予定になっているため、今後 Autoprefixer を導入する場合、使用するべきではありません。
Options
Function autoprefixer(options) returns a new PostCSS plugin. ...
1
票
macOS で gulp の環境構築時に .bashrc が見つからない
homeフォルダ内で .bash_profile のファイルは見つかりますが、
.bashrc のファイルが見つかりません。
その前に、最近のMacOSのターミナルでのデフォルトシェルはzshです。
環境変数SHELLの内容を確認してください。
~ $ echo $SHELL
/bin/zsh
zshの場合、環境設定ファイルは、.zprofile、および、.zshrcになります。
1
票
Accepted
csscombの設定について。思ったように整形してくれません。
根本的な解決にはならないかもですが・・・
csscombで整形したあとに出力する前にgulp-sassでコンパイルしてあげると思う通りに整形されます。
var sass = require("gulp-sass"); gulp-sassを呼んであげて
gulp.task('comb', function () {
return gulp.src('./src-before/**/*.css'...
1
票
Accepted
srcを変更したところなぜか反応しなくなりました。
・下記のようにしたところうまくいきました。
第二引数が足りなかった。
gulp.task('babeltrance', function() {
gulp.src('./*.js', ['babeltrance'])
.pipe(plumber())
.pipe(babel({
presets: ['es2015'],
}))
.pipe(gulp.dest('./babel-dest'));
}...
1
票
gulp-sassを実行すると Invalid CSS のエラーが発生する
解決案①
拡張子をsassとして記載する場合は、インデントで調整して階層構造を表現してください。
html
background:red;
body
background:blue;
解決案②
記載内容から"{}"を入れ子で書きたいのかと思います。その場合はファイルの拡張子をscssに変えてください。
style.sass -> style.scss
...
1
票
Disconnected from BrowserSyncにすぐになってしまいます。
BrowserSyncのCSSリロードについては、毎回ページごとリロードするのではなく、ファイルの更新の際にCSSのみ差し替える事が可能です。
(browserSync.reloadはたしかBS上で開いているすべてのページをリロードしますよね。)
BrowserSync初期化時のfilesオプションや、browserSync.streamを用いることでこれが可能です。
...
1
票
Accepted
Disconnected from BrowserSyncにすぐになってしまいます。
こういう問題は難しいですね。
デバッグ作業のように原因を絞り込んでいくしかないと思います。
以下は直接の回答ではなく、作業の例です。
HTML を最低限の物にしてみる
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Test</h1>
</body&...

mjy♦
- 1.2万
1
票
Accepted
autoprefixerを導入したのですが、エラーが出ます。
autoprefixer をreuireしてないため、ですね。
PostCSSのプラグインとして autoprefixer を使うのであれば gulp-autoprefixer ではなく autoprefixerの方になるかと思います。
各requireの最後あたりに
var autoprefixer = require('autoprefixer');
を追加します。
...
1
票
Accepted
cssnext から rem に自動で px を加える機能をなくしたい
端的には下記のようになります。
postcss([
cssnext({
features: {
rem: false
}
})
])
(例示コードは Gulp での利用を想定しています)
cssnext の話なので、まずは cssnext のドキュメントをあたるのがよいです。
browsers ...

mjy♦
- 1.2万
1
票
Accepted
Gulp で起動した BrowserSync に出力先ディレクトリの更新時にもれなくリロードさせたい
gulp.watch("./dest/**/*").on('change', browserSync.reload);
とりあえず、上記のように出力先ディレクトリ(browser-syncで提供するディレクトリ)全体をwatchするのはいかがでしょうか。
もちろん、ソースの方は下のように、また別に監視するという事で。
gulp.watch('./src/css/**/*.css', ["css"...

mjy♦
- 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♦
- 1.2万
1
票
RubyMine(もしくはJetBrains製品)でES6のブレイクポイントが機能しない
引用されているやり取りを読みましたが、gulp.src のことには特に触れられていないと思います。
挙がっている話としては、
規格に沿った sourcemap が生成され、それが .js ファイルから //@sourceMappingURL で正しく関連付けられていることが必要
WebStorm の babel file watcher を使えば期待通りにブレークポイントが機能したが、 ...
1
票
gulp-sassでコンパイルすると@includeが使えず「no mixin named 」エラーが出る
@includeの後に@mixinを書いていました、コードは絶対あっていると思っていました…
お騒がせしました。
1
票
gulp-sassでのコンパイル時のエラーについて
gulp.src('./**/*.scss')
この記述では、現在のディレクトリ以下の全てのscssファイルをコンパイル対象にしています。そのため、./node_modules/ 内にインストールされたNodeモジュールの、テスト用ファイルもコンパイルしてしまってします。
自分のプロジェクトのファイルをgulp-sassなどでコンパイルする場合は、...
1
票
sassのブラウザへの自動反映について
予想ですが、
gulp server => watchしてないので更新されない
gulp sass => 初期化してない(browser({OPTIONS}))のでreloadでエラー
という状態になっているのかもしれません。GitHubに例がありますので参考にしてみてはいかがでしょうか。
https://github.com/Browsersync/recipes/tree/master/...
1
票
Angular2 で複数のTypeScriptファイルをひとつにまとめるには?
tsconfig.jsonで compilarOptionsのoutプロパティに出力先ファイル名を指定すればimportやrequireが解決されて結合された状態でコンパイルされます。
1
票
Angular2 で複数のTypeScriptファイルをひとつにまとめるには?
TypeScript 1.8でAMDやsystemモジュールを1ファイルに結合できるようになるそうですが、現状まだ無理なので、moduleをcommonjsでコンパイルしbrowserifyを使うとまとめられます。
//tsconfig.json
{
"compilerOptions": {
"target": "ES5",
"module": "system",
...
$ ...
Only top scored, non community-wiki answers of a minimum length are eligible
関連するタグ
gulp × 52javascript × 17
node.js × 13
sass × 7
css × 4
npm × 4
browser-sync × 2
php × 1
ruby-on-rails × 1
html × 1
linux × 1
macos × 1
ubuntu × 1
laravel × 1
bash × 1
wordpress × 1
angularjs × 1
typescript × 1
security × 1
laravel-5 × 1
zsh × 1
rubymine × 1
babeljs × 1
rsync × 1
browserify × 1