gulpとbabelを使用して.jsxファイルを.jsにコンパイルする方法？

Question

私は、babelとgulpの使い方や、JavaScriptに反応するjsxファイルをコンパイルする方法が完全にはわかりません。私はnodejs、babel-cli、gulp-babel、babel-preset-react、およびbabel-preset-es2015

ノードモジュールをインストールした

は私の作業ディレクトリに登場し、すべてがそこにあると思われます。

マイpackage.jsonファイルは次のようになります。

{ 
    "name": "example1", 
    "version": "1.0.0", 
    "babel":{ 
    "presets": ["react", "es2015"] 
    }, 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-cli": "^6.7.5", 
    "babel-preset-es2015": "^6.6.0", 
    "babel-preset-react": "^6.5.0", 
    "gulp-babel": "^6.1.2" 
    } 
} 

そして、私のgulpfile.jsは次のようになります。

var gulp = require('gulp'); 
var react = require('gulp-react'); 
var concat = require('gulp-concat'); 
var babel = require("gulp-babel"); 

gulp.task('default', function(){ 
    return gulp.src('src/**').pipe(react()).pipe(concat('application.js')).pipe(gulp.dest(' ./')) 
}); 

私は、これはJavaScriptに私のファイルをコンパイルすることができるようするために必要なすべてのセットアップであると信じています。しかし、私はnpm run gulpをしようとすると、コマンドプロンプトから、私は私が解釈するかどうかはわかりません出力を以下の取得：

npm ERR! Windows_NT 10.0.10586 
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "gulp" 
npm ERR! node v4.4.2 
npm ERR! npm v2.15.0 

npm ERR! missing script: gulp 
npm ERR! 
npm ERR! If you need help, you may report this error at: 
npm ERR!  <https://github.com/npm/npm/issues> 

npm ERR! Please include the following file with any support request: 
npm ERR!  C:\Users\Cossie\Desktop\INFO30005 mockup\react\Example 1\npm-debug.log 

私は私の.jsxのファイルが.jsファイルするためにコンパイル反応させるために何ができますか？

EDIT：package.jsonでスクリプトの下"gulp":"gulp"を追加

、その後npm run gulpを実行すると、私を与える：

module.js:327 
    throw err; 
    ^

Error: Cannot find module 'gulp-react' 
    at Function.Module._resolveFilename (module.js:325:15) 
    at Function.Module._load (module.js:276:25) 
    at Module.require (module.js:353:17) 
    at require (internal/module.js:12:17) 
    at Object.<anonymous> (C:\Users\Cossie\Desktop\INFO30005 mockup\react\Example 1\gulpfile.js:2:13) 
    at Module._compile (module.js:409:26) 
    at Object.Module._extensions..js (module.js:416:10) 
    at Module.load (module.js:343:32) 
    at Function.Module._load (module.js:300:12) 
    at Module.require (module.js:353:17) 

npm ERR! Windows_NT 10.0.10586 
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "gulp" 
npm ERR! node v4.4.2 
npm ERR! npm v2.15.0 
npm ERR! code ELIFECYCLE 
npm ERR! example1@1.0.0 gulp: `gulp` 
npm ERR! Exit status 1 
npm ERR! 
npm ERR! Failed at the example1@1.0.0 gulp script 'gulp'. 
npm ERR! This is most likely a problem with the example1 package, 
npm ERR! not with npm itself. 
npm ERR! Tell the author that this fails on your system: 
npm ERR!  gulp 
npm ERR! You can get information on how to open an issue for this project with: 
npm ERR!  npm bugs example1 
npm ERR! Or if that isn't available, you can get their info via: 
npm ERR! 
npm ERR!  npm owner ls example1 
npm ERR! There is likely additional logging output above. 

npm ERR! Please include the following file with any support request: 
npm ERR!  C:\Users\Cossie\Desktop\INFO30005 mockup\react\Example 1\npm-debug.log 

Answer 1

あなたがnpm run gulpを使用して、プロジェクトのローカルインストールからがぶ飲みを実行したい場合は、gulpを追加する必要がありますあなたのスクリプトにpackage.json：

"scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    "gulp": "gulp" 
},