文档章节

pycharm集成gulp自动编译reactjs

能东棍
 能东棍
发布于 2015/12/05 23:12
字数 599
阅读 185
收藏 0
点赞 0
评论 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
博文 33
码字总数 24258
作品 0
南京
程序员
一看就懂的ReactJs入门教程-精华版

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

方宏春 ⋅ 前天 ⋅ 0

使用PyCharm进行Python远程开发

本文翻译自 Feature Spotlight: Python remote development with PyCharm,讲述如何使用PyCharm进行Python远程开发。全文系作者原创,仅供学习参考使用,转载授权请私信联系,否则将视为侵权...

郗南枫 ⋅ 05/20 ⋅ 0

笑脸识别从零开始研究:小tips(1)

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

刘必王A6 ⋅ 06/18 ⋅ 0

Python安装与专属IDE_Pycharm安装配置、永久激活,赠汉化版!

我是首先写pycharm教程,后来考虑到大家会装不会使用,我又写了一些基础使用教程,然后再写这个Python安装的。总共花费了87分钟,确实有点辛苦,所以这些简单的我都会用太多的话去解释了。实...

qq1622479435 ⋅ 06/17 ⋅ 0

React 快速上手 - 07 前端路由 react-router

React 快速上手 - 07 前端路由 react-router 目标 基础使用 参数传递 路由匹配 转换动画 跳转路由 环境 react 16 react-router 4 react-router-dom 4 react-transition-group 0. 安装 通过官...

会煮咖啡的猫 ⋅ 05/24 ⋅ 0

【转载保存】Ubuntu14.04安装pycharm用于Python开发环境部署,并且支持pycharm使用中文输入

转载自:http://www.cnblogs.com/chentq/p/4975794.html 作者: 刍狗 一、目标 实现在Linux下用pycharm调试工具/Python开发 Linux使用vi/vim工具写Python,缺点:调试不方便,无代码提示、跳...

大连瓦匠 ⋅ 2017/10/12 ⋅ 0

Pycharm远程调试之Docker debug

关于连接Linux Docker 我们以前使用的是Docker Toolbox,在配置的时候pycharm也是自动填充的是关于Docker Toolbox的信息,看来是对 Docker Toolbox的支持是比较好的。 我们需要了解以下几件事...

JungleKing ⋅ 06/13 ⋅ 0

编译py代码:pycharm不报错,但是cmd中python + xxx.py报错

大家好:最近使用pycharm作为ide学习python,遇到了一个问题。 ------------------------------------------------------------------------------------------------------- 1、代码之前写好......

我是520老谢 ⋅ 今天 ⋅ 0

Python开发一:PyCharm教程

通过前面的Python学习笔记教程,基本已经算入门Python了,接下来为了巩固Python,此后几篇文章重点在于使用Python开发应用。 所谓好马配好鞍,Python开发已经不同于Python入门,单纯的官方解...

viatorsun ⋅ 05/11 ⋅ 0

Python 工具——Anaconda+Pycharm 的安装过程

适用对象:编程完全小白,准备安装 Python 进行学习 本文特点: 十分具体详细,细致到了每一步安装过程的截图,看了此篇,你完全不用看其他教程,给出了软件的百度云以及自己找到的可用的 Py...

xjtuhit ⋅ 05/07 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Nginx服务架构初探(四):nginx服务器的rewrite功能

nginx服务器的rewrite功能 1.nginx后端服务器组的配置 1>upstream name {…} name是给服务器组限的组名 2>server address [parameters]; address为服务器地址 parame......

余温灬未存 ⋅ 今天 ⋅ 0

layer.prompt使文本框为空的情况下也能点击确定

最近一直在使用layui,但是用到弹出层layer.prompt时,如果文本框是空的话点击确定没有反应,不能向下执行。 但是我又需要空值,看看我原来的代码。 123456789 layer.prompt...

孟飞阳 ⋅ 今天 ⋅ 0

Linux普通文件压缩工具gzip、Bzip2、xz

第六章 文件压缩和打包 6.1 压缩打包介绍 Linux环境常见压缩文件类型: .zip,.gz,.bz2,.xz, .tar.gz,.tar.bz2,.tar.xz 压缩打包的目的 方便文件传输 节省磁盘空间 减少传输花费的时间 ...

弓正 ⋅ 今天 ⋅ 0

移动弹窗基础知识浅析——IOS弹窗体系

摘要: 最为常见的【弹窗】反而是最“捉摸不定”的东西。各种类型的弹窗傻傻分不清楚,不知道在什么场景下应该用哪种弹窗。尤其是遇到“二次确认”等场景…… 因此,打算从头整理移动弹窗的基...

阿里云云栖社区 ⋅ 今天 ⋅ 0

zabbix短信报警统计以及报表展示

一、需求 由于我们的业务报警比较频繁,之前是针对每个报警进行具体处理,但是有时还会重复出现,或者后续处理有时忘记跟进等,因此进行报警短信的统计,可以针对一些问题与业务跟进,明确后...

o翡翠谷o ⋅ 今天 ⋅ 0

JNI 输出LOG

1、导入log头文件。在你使用的 .c/ .cpp 文件中,导入 log.h 头文件。 #include<android/log.h> 2、在android.mk 加上 LOCAL_LDLIBS := -llog 或 LOCAL_SHARED_LIBRARIES := liblog 3、定义L......

国仔饼 ⋅ 今天 ⋅ 0

主线程pthread_exit 作用

#include <iostream>#include <pthread.h>#include <unistd.h>using namespace std;#define NUM_THREADS 10void* say_hello(void* args){ int i = *((int*)args);/......

xxdd ⋅ 今天 ⋅ 0

崛起于Springboot2.X之Mybatis-xml方式操作mysql数据库(3)

序言:当第一篇讲道Mybatis的时候,只要使用过mybatis的java程序员100%都会知道这种方式,因为这是最广泛最全面的编写sql操作mysql数据库的方式,高级sql的编写往往通过xml方式,接下来进入正...

木九天 ⋅ 今天 ⋅ 1

移动弹窗基础知识浅析——IOS弹窗体系

摘要: 最为常见的【弹窗】反而是最“捉摸不定”的东西。各种类型的弹窗傻傻分不清楚,不知道在什么场景下应该用哪种弹窗。尤其是遇到“二次确认”等场景…… 因此,打算从头整理移动弹窗的基...

猫耳m ⋅ 今天 ⋅ 0

spring elasticsearch 2.4 date 日期

1.mappingPUT user_behavior { "mappings": { "user_behavior": { "properties": { "date": { "type": "createDate", ......

xiaomin0322 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部