5
票
承認済み
babelでトランスパイルをしても元ファイルとほぼ同じファイルが出力されてしまう
はい。あなたのgulpで、babelはきちんと動いています。
では、なぜ「あなたが求めている変換」は行われなかったのでしょうか。
まずはREADMEちゃんと読みましょうね。
https://www.npmjs.com/package/gulp-babel
このサンプルにあるように、
.pipe(babel({
presets: ['es2015']
}))
とすればes2015→...
4
票
承認済み
gulpでbabelのタスクが繰り返し大量に実行されてしまう
ログからは、babel babeltrance babelwatch の3つのタスクが繰り返し実行されていることが読み取れます。これらのタスクを見てみましょう。
gulp.task('babeltrance', function() {
gulp.src('dest-after/js/babel/*')
.pipe(plumber())
.pipe(babel({
...
4
票
承認済み
SyntaxError: Unexpected token -
Javascriptの関数名に使える記号は、ドル記号($)とアンダースコア(_)だけです。
マイナス記号(-)は使えません。
ところが、質問のコードでは
function browser-sync()
とマイナス記号が使われているので"Unexpected token -"(使われていないはずの記号 - が見つかりました)とのエラーが出たのです。
<修正案>
function ...
4
票
'node_modules' は、内部コマンドまたは外部コマンド、 操作可能なプログラムまたはバッチ ファイルとして認識されていません。
質問者です。すみません
結局windows なのが原因だったようで、package.jsonのpathのところにある” を\でエスケープしてみたところ解決したようです。
閲覧くださった方々、ありがとうございます。
4
票
承認済み
gulp 意図したフォルダにsassがコンパイルされない
.pipe(gulp.dest(dest.root)) ではなく .pipe(gulp.dest('dest.root'))となっていることが原因です。
3
票
承認済み
'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
票
承認済み
autoprefixerでgridを有効にしているのにIE11でレイアウトが崩れる
Autoprefixer の grid オプションの true は、 no-autoplace の別名です。しかし、 true という表記は廃止予定になっているため、今後 Autoprefixer を導入する場合、使用するべきではありません。
Options
Function autoprefixer(options) returns a new PostCSS plugin. ...
2
票
承認済み
gulpfile.js で BrowserSync を使用すると "is not a PostCSS plugin" というエラーが出る
Browser Sync は PostCSS のプラグインではないからです。
基本的には何のプラグインでもありません。
browser-sync モジュールは、開発用のサーバを作成する為の API と、単独で動作するコマンドの両方を提供します。
API は Gulp と協調して動作させるのに便利な機能があり、他のモジュールを介さずgulpfile.js で使用されますが、Gulp ...
2
票
承認済み
gulpの自動圧縮を実行しないようにしたい。
その処理はbabelによって行なわれています。自動圧縮を行わないようにするには、babelのcompactオプションをfalseに設定します。
具体的には、gulp-babelを使用している以下の部分に書き加えます。
gulp.task('babeltrance', function() {
gulp.src('./babel-before/*.js', ['babeltrance'])
...
1
票
macOS で gulp の環境構築時に .bashrc が見つからない
homeフォルダ内で .bash_profile のファイルは見つかりますが、
.bashrc のファイルが見つかりません。
その前に、最近のMacOSのターミナルでのデフォルトシェルはzshです。
環境変数SHELLの内容を確認してください。
~ $ echo $SHELL
/bin/zsh
zshの場合、環境設定ファイルは、.zprofile、および、.zshrcになります。
1
票
承認済み
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
票
承認済み
csscombの設定について。思ったように整形してくれません。
根本的な解決にはならないかもですが・・・
csscombで整形したあとに出力する前にgulp-sassでコンパイルしてあげると思う通りに整形されます。
var sass = require("gulp-sass"); gulp-sassを呼んであげて
gulp.task('comb', function () {
return gulp.src('./src-before/**/*.css'...
1
票
承認済み
Gulp で起動した BrowserSync に出力先ディレクトリの更新時にもれなくリロードさせたい
gulp.watch("./dest/**/*").on('change', browserSync.reload);
とりあえず、上記のように出力先ディレクトリ(browser-syncで提供するディレクトリ)全体をwatchするのはいかがでしょうか。
もちろん、ソースの方は下のように、また別に監視するという事で。
gulp.watch('./src/css/**/*.css', ["css"...
1
票
承認済み
sourcemapsをpostcssで使うことはできないのでしょうか?
sourcemapsをpostcssで使うことはできないのでしょうか?
使用出来ます。
公式の README でも gulpの使用例では、gulp-sourcemapsが使われています。
https://github.com/postcss/postcss#gulp
gulp.task('css', function () {
var postcss = require('...
1
票
Disconnected from BrowserSyncにすぐになってしまいます。
BrowserSyncのCSSリロードについては、毎回ページごとリロードするのではなく、ファイルの更新の際にCSSのみ差し替える事が可能です。
(browserSync.reloadはたしかBS上で開いているすべてのページをリロードしますよね。)
BrowserSync初期化時のfilesオプションや、browserSync.streamを用いることでこれが可能です。
...
1
票
承認済み
Disconnected from BrowserSyncにすぐになってしまいます。
こういう問題は難しいですね。
デバッグ作業のように原因を絞り込んでいくしかないと思います。
以下は直接の回答ではなく、作業の例です。
HTML を最低限の物にしてみる
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Test</h1>
</body&...
1
票
承認済み
autoprefixerを導入したのですが、エラーが出ます。
autoprefixer をreuireしてないため、ですね。
PostCSSのプラグインとして autoprefixer を使うのであれば gulp-autoprefixer ではなく autoprefixerの方になるかと思います。
各requireの最後あたりに
var autoprefixer = require('autoprefixer');
を追加します。
...
1
票
承認済み
cssnext から rem に自動で px を加える機能をなくしたい
端的には下記のようになります。
postcss([
cssnext({
features: {
rem: false
}
})
])
(例示コードは Gulp での利用を想定しています)
cssnext の話なので、まずは cssnext のドキュメントをあたるのがよいです。
browsers ...
無効化に投票
関連するタグ
gulp × 53javascript × 17
node.js × 14
sass × 7
npm × 5
css × 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