pycharm集成gulp自動編譯reactjs

https://www.jetbrains.com/pycharm/help/using-grunt-task-runner.html

舊方法

  1.下載並安裝nodejs   https://nodejs.org/en/

  2.安裝react工具

npm install -g react-tools

  3.監視文件夾裏面的js變更，若是變更將會自動從新編譯jsx爲js

jsx -w jsx js

     

    這句命令被放在run_jsx.bat下面，並一直運行着， 當jsx文件夾下面的js有變更時, 將會自動編譯到文件夾js下面

安裝Gulp

   官方使用說明

     https://www.jetbrains.com/pycharm/help/using-gulp-task-runner.html

  1.安裝nodejs插件

    打開 File | Settings, 按照下圖操做安裝插件, 

   

    而後重啓pycharm

    在設置目錄下面你就能夠看到nodejs包管理工具了

    

  2.npm改成鏡像源改成淘寶，加快npm包的安裝速度

    修改或者新建文件 ~/.npmrc,文件內容改成下面的

    registry=https://registry.npm.taobao.org
    disturl=https://npm.taobao.org/dist

    而後調用

  npm update

   

監視工程裏面的jsx文件

    我新建了一個只包含一個jsx目錄的工程,  我但願當我修改jsx目錄下面的test1.jsx時,gulp能幫我把編譯後的js更新到js目錄下面

    

    

 1.初始化node環境並安裝react,browserify和babel

   使用pycharm自帶的終端工具，分別輸入以下命令

npm init

npm install gulp vinyl-source-stream browserify --save-dev

npm install react react-dom babelify babel-preset-react --save-dev

    

  

   安裝完成後會生成一個package.json文件和node_module目錄

    

    package.json文件裏面寫明瞭我剛纔用npm安裝的包

 2.添加一個gulpfile.js,  配置gulp編譯任務， 將test1.jsx編譯爲test1.js

    

    gulpfile.js內容以下

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');

//編譯jsx任務
var buildJsx = function (src, dest) {
    browserify('static/jsx/'+src, {debug: true})
        .external('react')
        .external('react-dom')
        .transform(babelify, {presets: ["react"]})
        .bundle()
        .on("error", function (err) {
            console.log("Error : " + err.message);
        })
        .pipe(source(dest))
        .pipe(gulp.dest('static/js/'));
};

gulp.task('test1', buildJsx.bind(this, 'test1.jsx', 'test1.js'));

gulp.task('browserify:watch', function () {
    gulp.watch('./static/jsx/test1.jsx', ['test1']);
});

gulp.task('default', ['build-all', 'browserify:watch']);

gulp.task('build-all', [
    'test1',
]);

    右鍵執行default ，啓動編譯任務

    

   

 3.將browserify:watch 直接設置爲隨工程啓動，方便一直監視文件變更

    File->Setting->Tools->Startup Tasks  選擇gulp.js 而後選擇default並apply

     

    

    而後當pycharm打開這個工程時會自動啓動這個任務去監視須要進行編譯的jsx文件