文档章节

pycharm集成gulp自动编译reactjs

能东棍
 能东棍
发布于 2015/12/05 23:12
字数 599
阅读 228
收藏 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
南京
程序员
私信 提问
PyCharm 4.5.2 RC 发布,Python 集成开发环境

PyCharm 4.5.2 RC 发布,更新内容如下: No subsystem: WEB-16843 (Usability Problem) Bower: notify users when searching for packages fails because of time out IDEA-138443 (Bug) Se......

oschina
2015/06/16
1K
3
PyCharm 5 发布,Docker/Conda 集成

PyCharm 5 正式版发布下载,此版本主要改进:完整的 Python 3.5 支持;Docker 集成;线程并发可视化;Django ORM 方法改进;Conda 集成;IPython Notebook v4 支持等等。 值得关注的改进: ...

oschina
2015/11/03
14.4K
26
PyCharm 5 EAP 发布,完全支持 Python 3.5

前几天发布了 PyCharm Edu 2 版本,这是第二款免费易用的 Python 教学工具。 今天发布了 PyCharm 5 Early Access Program (EAP) ,现已提供 下载 (官方页面)。 PyCharm 5 EAP build # 142.49...

oschina
2015/09/20
5.4K
6
PyCharm 4.5.1 发布,Python 集成开发环境

PyCharm 4.5.1 发布,此版本主要有以下更新: No subsystem PY-9616 (Task) Add the attached files to the Tips of the Day WEB-16594 (Bug) Good code marked red. Javascript getter show......

oschina
2015/05/23
3.1K
6
PyCharm 4 首个预览版 build 138.2360 发布

PyCharm 4 首个公开预览版 build 138.2360 现已提供下载啦! 此版本现已提供在 PyCharm Early Access Preview (EAP) 页面。 跟往常一样,PyCharm 4 预览构建版本会提供两个不同的版本:免费开...

oschina
2014/09/21
3.5K
18

没有更多内容

加载失败,请刷新页面

加载更多

windows10小鹤双拼注册表

《安全第一》直接发文本内容,自己建文本,改文本后缀reg。 使用方法: 1.复制下示文本内容,打开你的文本编辑器(#记事本notepad或其他++),粘贴文本内容并保存在任意位置(不影响使用) ...

漫步海边小路
13分钟前
1
0
一、数据挖掘

数据挖掘的发展动力---需要是发明之母 数据爆炸问题 自动数据收集工具和成熟的数据库技术使得大量的数据被收集,存储在数据库、数据仓库或其他信息库中以待分析。我们拥有丰富的数据,但却缺...

凯文加内特
17分钟前
1
0
Java线程池ThreadPoolExecutor

线程池 ThreadPoolExecutor 线程池是ExecutorService的实现,可以通过Executors执行工厂构造不同类型的执行服务(线程池)。 ThreadPoolExecutor线程池使用的是阻塞队列BlockingQueue。 用于...

器石_
17分钟前
2
0
Mybatis 实现SQL拦截并在控制台打印SQL和参数

注:可以拦截sql 执行时间,优化sql。并打印sql 以及参数 第一步:创建类: SqlPrintInterceptor 并实现 Interceptor 该类如下: package com.ra.common.plugin;import org.apache.ibati...

轻量级赤影
20分钟前
2
0
Log4j2 配置

config: <?xml version="1.0" encoding="UTF-8"?><!-- http://logging.apache.org/log4j/2.x/manual/appenders.html --><!-- status 负责打印日记系统的 WARN 级别以及以上的日记 --><C......

Credo-Zhao
21分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部