文档章节

pycharm集成gulp自动编译reactjs

能东棍
 能东棍
发布于 2015/12/05 23:12
字数 599
阅读 456
收藏 0

行业解决方案、产品招募中!想赚钱就来传!>>>

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文件

     





能东棍
粉丝 7
博文 34
码字总数 25265
作品 0
南京
程序员
私信 提问
加载中
请先登录后再评论。
极速博客引擎--Gor

gor 是使用 golang 实现的类Ruhoh静态博客引擎(Ruhoh like),基本兼容ruhoh 1.x规范. 相当于与ruhoh的官方实现(ruby实现), 有以下优点: 速度完胜 -- 编译wendal.net近200篇博客,仅需要1秒 安装...

wendal
2013/01/20
3.8K
0
跨平台手机应用开发--Gideros

Gideros 可以让你轻松快速创建 iOS 和 Android 应用,提供用户友好的集成开发环境,内建模拟器对应用进行不同屏幕大小、分辨率下的测试,最大的优点是可即时修改代码即时进行测试,无需编译安...

匿名
2013/02/19
2.7K
0
基于 ThinkPHP 的内容管理系统--歪酷CMS

歪酷网站管理系统(歪酷CMS)是一款基于THINKPHP框架开发的PHP+MYSQL网站建站程序,本程序实现了文章和栏目的批量动态管理,支持栏目无限分类,实现多管理员管理,程序辅助功能也基本实现了常见的文...

鲁大在线
2013/02/19
7K
1
自定义表单系统--FormDesign

是基于 FLEX 开发的一款B/S的自定义表单系统 整个过程如下: 1、通过FormDesign自定义表单画出相应的表单; 2、将生成好的XML放到程序中,并通过后台自动编译成JSP; 注:FormDesing只是自定...

polliwog
2013/03/29
1.6W
1
Chrome页面自动刷新插件--smartF5

smartF5是一款chrome插件,用以实现监控页面资源,并自动刷新。 特别适合双屏情况下的DEMO开发,大大提高页面开发效率。 让你键盘上的F5键退休吧! 为什么选择smartF5 本插件具有以下特色: ...

YanisWang
2013/04/04
1.2W
0

没有更多内容

加载失败,请刷新页面

加载更多

数据库高频面试点,事务/乐观锁/悲观锁/CAS/MySQL存储引擎

事务的ACID特性是什么? 原子性: 事务是最小的执行单位,不允许分割。事务的原子性确保动作要么全部完成,要么完全不起作用; 一致性: 执行事务前后,数据保持一致,多个事务对同一个数据读...

osc_45536bvu
35分钟前
16
0
大数据BI软件助力企业数字化转型

当下,「新基建」势头正盛,随着“新基建”成为热议话题,数字化也随之成为企业面临的新机遇和新挑战。新基建的核心就是数据,数据是数字经济和企业数字化转型的生产要素和发展动力。 再看看...

osc_0boqdoe2
37分钟前
0
0
凯旋创投来志刚:基因治疗新时代,大戏刚刚开始

  2017 年,全球第一个基因治疗方法 CAR-T 细胞药物 Kymriah 获得 FDA 上市批准,从此掀起了基因治疗的热潮。随着相关技术和政策的不断成熟,基因治疗市场也随之扩大。根据德勤发布的《引领...

osc_k3vwonkw
38分钟前
10
0
LightningChart.NET使用两个BarSeries创建简单的2D图表

本教程介绍了如何使用两个BarSeries创建简单的2D图表。 BarSeries将数据值表示为矩形条,并且可以用于以非常清晰的方式可视化数据之间的差异和方差。 在本教程中,BarSeries用于表示两年期间...

roffey
39分钟前
0
0
Mybatis trim 标签的 2 个妙用!

云栖号资讯:【点击查看更多行业资讯】 在这里您可以找到不同行业的第一手的上云资讯,还在等什么,快来! mybatis的trim标签一般用于去除sql语句中多余的and关键字,逗号,或者给sql语句前拼...

osc_x03qsedc
39分钟前
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部