如何使用gulp和babel将.jsx文件编译为.js？

Question

我不完全确定如何使用babel和gulp并编译一些反应jsx文件到JavaScript。

我已经安装的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文件？

编辑：

在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" 
},