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

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

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

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

gulp

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

Q&A

解決済

1回答

3258閲覧

gulp で 「JavaScriptのコード圧縮」と 「ES6(ES2015)→ES5への変換」を同時に行いたい

hogeniho

総合スコア58

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

gulp

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

0グッド

3クリップ

投稿2019/10/01 03:29

編集2019/10/03 11:19

事象

  • gulp で「JavaScriptのコード圧縮」と 「ES6(ES2015)→ES5への変換」を同時行うと、「JavaScriptのコード圧縮」だけが反映されない
  • コマンドプロンプト上では、タスクはエラーなく回っている
  • 現状は個別にタスクを実行しないと「JavaScriptのコード圧縮」されない

実現したいこと

gulpコマンドのみで(個別にタスクを実行せずに)、
「JavaScriptのコード圧縮」と 「ES6(ES2015)→ES5への変換」を同時に行いたいです。
お詳しいかたでどなたかご教授いただけないでしょうか?
よろしくお願い致します。

191003追記
「トランスパイル」は出来るのですが、
'gulp jsを実行しても、「トランスパイル」が行えない状態になっております。
gulp js-browserify gulp js-uglify を個別に実行するか、
gulp js 実行後に改めて、gulp js-uglify を実行しないと実現したいコードが吐き出されない状況となっております。

フォルダ構造 / ファイル一式

https://github.com/nihonium/00__project

ソースコード(gulp)

gulpfile.js

// 外部ファイル読み込み const config = require('./config'); // gulpプラグインの読み込み const gulp = require('gulp'); const runSequence = require('run-sequence'); ・・・中略・・・ // JavaScript const uglify = require('gulp-uglify'); const babel = require('gulp-babel'); const browserify = require('browserify'); const source = require('vinyl-source-stream'); const babelify = require('babelify'); ・・・中略・・・ // ファイル名変更 const rename = require('gulp-rename'); // エラー出力 const plumber = require('gulp-plumber'); const notify = require('gulp-notify'); // タスクを順次実行 gulp.task('default', function(callback) { return runSequence(['copy','html','css','image', 'js'], callback); }); ・・・中略・・・ // JavaScriptタスクを生成する gulp.task('js', function(callback) { return runSequence(['js-browserify', 'js-uglify'], callback); }); gulp.task('js-browserify', function() { return config.js.concat.forEach(function(item) { browserify ( { entries: item.source, extensions: ['.js'] } ) .bundle() .on('error', function(e){ console.log(e); }) .pipe(source(item.publish)) .pipe(gulp.dest('dist/js/')) }); }); gulp.task('js-uglify', function() { // ファイルを取得 return ( gulp.src(['./dist/js/**/*.js']) // コンパイルを実行 .pipe(plumber( { errorHandler: notify.onError('<%= error.message %>') } )) .pipe(babel({ presets: ['@babel/preset-env'] })) .pipe(uglify()) .on('error', function(e){ console.log(e); }) // フォルダ以下に保存 .pipe(gulp.dest('dist/js/')) ); }); ・・・中略・・・

config.js

module.exports = { js: { concat: [ { source: [ 'assets/library/js/target/index.js', 'assets/library/js/unit/_smooth-scrolling.js' ], publish: 'index.js' } ] } };

開発環境

OS
windows10

gulp
CLI version 3.9.1
Local version 3.9.1

Node.js
v8.9.4

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

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

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

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

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

miyabi_takatsuk

2019/10/01 06:38

んん?gulp構文の中でbabelを使っているなら、すでにトランスパイル(今回で言うES5化)できているんじゃないでしょうか? 何かうまくいっていないことがあるのでしょうか??
hogeniho

2019/10/03 11:19 編集

コメントありがとうございます。スイマセンお返事が遅くなりました。 おっしゃられるところの「トランスパイル」は出来るのですが、 「トランスパイル」は出来るのですが、 `'gulp js`を実行しても、「トランスパイル」が行えない状態になっております。 `gulp js-browserify` `gulp js-uglify` を個別に実行するか、 `gulp js` 実行後に改めて、`gulp js-uglify` を実行しないと実現したいコードが吐き出されない状況となっております。
miyabi_takatsuk

2019/10/03 14:48

わかりました。 各メソッドは、個別には実行できるのですね? runSquenseの挙動に原因がありそうな気がします。 こちらでも少し調べ、検証させて下さい。
guest

回答1

0

ベストアンサー

原因がわかりましたので、回答させていただきます。

原因は、元回答プラスαでした。
js-browserifyタスクの中で、
return config....と実行しておりますが、
forEachは何も値を返さないので、
次に実行している、js-uglifyは何もない(undefined状態)ものに対して、
何も実行できない、というのが原因です。
returnさせなきゃいけないのは、gulpオブジェクトですので、下記のように修正してはいかがでしょうか?

javascript

1gulp.task('js-browserify', function() { 2 // returnさせるようのローカル変数を用意 3 let gulpData; 4 5 // まずはforEachを実行してしまう 6 config.js.concat.forEach(function(item, index, arr) { 7 // あらかじめ、返す用の変数に格納しておく 8 const gulpInnerData = browserify ( 9 { 10 entries: item.source, 11 extensions: ['.js'] 12 } 13 ) 14 .bundle() 15 .on('error', function(e){ 16 console.log(e); 17 }) 18 .pipe(source(item.publish)) 19 .pipe(gulp.dest('dist/js/')); 20 21 // 走査の最後なら、上スコープの変数に格納 22 if (index + 1 == arr.length) { 23 gulpData = gulpInnerData; 24 } 25 }); 26 // 最終的なGulpオブジェクトを返す 27 return gulpData; 28}); 29

上記プラス、元回答のrunSequenceの同期実行を行えば、うまくいくはずです。

-------- 以下元回答 --------

一番目の処理である、js-browserifyタスクが完了される前に、
次のjs-uglifyタスクが実行されているからです。

要は、js-browserifyによって、'dist'ディレクトリの中にファイルが生成される前に、
js-uglifyが、'dist'ディレクトリの中のjsファイルを参照しているからです。
なので、ファイルがないので、js-uglifyは何もできずに処理が終了してしまうわけです。
run-sequenceに関して、詳しく調べているわけではないので、なんとも言えないのですが、
挙動から察するに、質問の書き方では、順番には実行するが、各々が非同期で実行されているものと思われます。
要は、一番目の処理が終了するしないに関わらず、その終了を待たずにすぐさま二番目の処理を実行・・・とやっちゃうわけですね。

なので、一番目の処理である、js-browserifyの終了時に、次のjs-uglifyを実行する、といった風にしなくてはなりません。

その書き方は、下記記事が参考になるかと思います。

Gulp でタスクを並列/直列処理する - Qiita

古めの記事ですが、
使用されているGulpのバージョンが、3系であれば、マッチする情報かと思います。

うまくいかない部分などまた出てきましたら、コメントで教えてください。

投稿2019/10/03 15:43

編集2019/10/04 07:50
miyabi_takatsuk

総合スコア9528

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

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

hogeniho

2019/10/04 06:44

ご回答ありがとうございますm(_ _)m 下記の記述を試しましたが、残念ながら解決致しませんでした。 `gulp-js`を実行しても、`gulp js-browserify` のタスクしか実行されない形でございます。 修正後 ``` gulp.task('js', function(callback) { return runSequence('js-browserify', 'js-uglify', callback); }); ``` また、npmのrun-sequenceのページの記述例には、 `return del` が使われていた為、念の為試してみましたが、 やはりファイルが事前に削除されるだけで解決策にはなりませんでした。 https://www.npmjs.com/package/run-sequence 恐れ入りますが、もし他に解決策ございましたらご教授いただけないでしょうか。 よろしくお願い致します。
miyabi_takatsuk

2019/10/04 07:01 編集

なんと・・・・。 実は、私の方でも似たように、複数のタスクを、 一個のタスクから実行とやっているのですが、そちらでは、 runSequence('js-browserify', 'js-uglify', callback);のような書き方で、 うまく動いているのです・・・。 一瞬、distなどの、出力先と、`js-uglify`からの参照元のパスが違うのでは? とも思ったのですが、 個別では実行できてるってことは、パスは間違ってないってことですもんね。 ですが、それでも念の為、パスがあっているかをご確認ください。 実際に、最初の` js-browserify`タスク実行後、どこに出力されているかも含めて。 私の方でも、もう少し、調査と検証をしていきます。
miyabi_takatsuk

2019/10/04 07:50

回答を追記しました。 forEachメソッドが、何も値を返さないので、それが原因だったようです。
hogeniho

2019/10/04 09:22

コメントありがとうございました、ご提示いただいた内容で解決いたしました! お恥ずかしながら、forEachメソッドに返り値が無い事を知らず; https://teratail.com/questions/180992 JavaScriptの部分からまた勉強し直していきたいと思います。ありがとうございましたm(_ _)m
miyabi_takatsuk

2019/10/04 10:29

解決できてよかったです! 私自身もgulpの勉強になったので、よかったです。
miyabi_takatsuk

2019/10/04 12:00

ちなみに、Gulpにおいても、cosole.logは使えますので、動作検証に使うと、より開発が捗るかと思いますよ。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問