文档章节

pycharm集成gulp自动编译reactjs

能东棍
 能东棍
发布于 2015/12/05 23:12
字数 599
阅读 193
收藏 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
南京
程序员
【7折巨献】Python开发工具——PyCharm 4倾情奉献

JetBrains(目前其产品正年终促销)正式发布了PyCharm 4(7折优惠)版本,新的PyCharm 4全面提高了编辑、学习、调试的能力。具体变化如下: 支持IPython Notebook 现在可以通过*.ipynb文件执...

kouxunli1
2014/12/08
0
1
Python编程利器-Pycharm

PyCharm是由JetBrains打造的一款Python IDE。我们知道,VS2010的重构插件Resharper就是出自JetBrains之手。那么,PyCharm有什么吸引人的特点呢? 首先,PyCharm用于一般IDE具备的功能,比如,...

Start-up
2012/06/15
0
1
一看就懂的ReactJs入门教程-精华版

现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略ReactJs的风采吧~~ 文章有点...

方宏春
06/20
0
0
笑脸识别从零开始研究:小tips(1)

近几个月的笑脸识别研究过程中踩了很多坑,担心记录在本地容易不小心给删了,记录一份放在网上 回顾学习之路,程序上从C++开始,到执着于Python,从实现简单的图像剪切到自己构建卷积神经网络...

刘必王A6
06/18
0
0
配置PyQt5+PyCharm+deepin集成开发环境

配置PyQt5+PyCharm+deepin集成开发环境 文件列表: 安装准备: 安装PyCharm IDE: 安装JDK: 下载JDK,下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-...

棋帅小七
07/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

这些Spring中的设计模式,你都知道吗?

设计模式作为工作学习中的枕边书,却时常处于勤说不用的尴尬境地,也不是我们时常忘记,只是一直没有记忆。 Spring作为业界的经典框架,无论是在架构设计方面,还是在代码编写方面,都堪称行...

Java填坑之路
18分钟前
1
0
Spring Aop原理之Advisor过滤

在上文(Spring Aop之Advisor解析)中我们讲到,Spring Aop对目标bean的代理主要分为三个步骤:获取所有的Advisor,过滤当前bean可应用的Advisor和使用Advisor为当前bean生成代理对象,并且上文...

爱宝贝丶
29分钟前
0
0
JMockit学习教程

1 JMockit中文网 我觉得如果仅仅是开发自测的话,把JMockit中文网认真看一遍,就可以在项目中使用JMockit了。 http://jmockit.cn/index.htm 2 JMockit中文教程 官方文档中文版。对于不喜欢看...

SuperHeroes
41分钟前
0
0
Linux服务器几乎从不采用Arch Linux?

我们见得多的Linux服务器系统一般都是什么Ubuntu Server啊,什么Cent OS啊,什么Fedora啊,或者企业采用的Red Hat啊,为什么几乎没有Arch Linux呢?下面我将从若干个方面指出Arch Linux在服务...

linux-tao
52分钟前
0
0
js 函数柯里化 闭包

参考 https://mp.weixin.qq.com/s/GEHL3jarDdAAcr5tQGjmDg 一个统计求和的函数 需要知道整个数组的信息,然后遍历求值 function countMoney() { let money = 0 // 温馨提示:arguments...

阿豪boy
54分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部