我计划为我的新项目使用 Codeigniter 和 ReactJS,
我需要知道如何设置项目文件夹以及将 .jsx 文件变为 .js 的构建过程
然后将所有 .js 文件连接并缩小为 min.js
我正在考虑使用 GruntJS
最佳答案
尝试 Gulp 来代替
我可能建议你使用 gulp 来代替,在我看来,它对初学者更友好。
如果我要设置这样一个项目,我可能会从这样的文件夹结构开始,然后安装 我的节点模块。我很喜欢使用 (sass,jade-php,livereload),但这些是可选的。
文件夹结构
package.json
gulpfile.js
/application
| views/
| ...
/public
| index.php
| css/
| js/
/vendor/codeigniter
/node_modules
/src
| react
app.jsx
| sass
app.scss
_variables.scss
| jade
views/ // this mimic's codeigniter's view folder structure
layouts/
index.jade
welcome
welcome_message.jade
要求
node.js
您需要首先全局安装 gulp。
npm install gulp -g
CD 到您的项目文件夹
cd c:/xampp/htdocs/project
生成package.json
npm init
生成gulp文件
touch gulpfile.js
安装工具
npm install gulp --save-dev
npm install gulp-plumber --save-dev
npm install gulp-connect --save-dev
npm install gulp-uglify --save-dev
npm install gulp-concat --save-dev
npm install gulp-react --save-dev
npm install gulp-sass --save-dev
npm install gulp-jade-php --save-dev
gulpfile.js
var gulp, plumber, connect, views, assets, root;
gulp = require('gulp');
plumber = require('gulp-plumber');
connect = require('gulp-connect');
views = './application/views';
assets = './public';
root = assets + '/index.php';
/*
* ---------------------------------------
* Jade PHP
* ---------------------------------------
**/
var jade = require('gulp-jade-php');
gulp.task('jade', function(){
return gulp.src('./src/jade/**/*.jade')
.pipe(plumber())
.pipe(jade({pretty: true}))
.pipe(plumber.stop())
.pipe(connect.reload())
.pipe(gulp.dest(views));
});
/*
* ---------------------------------------
* React
* ---------------------------------------
**/
var react = require('gulp-react');
var uglify = require('gulp-uglify');
gulp.task('react', function(){
return gulp.src('./src/react/**/*.jsx')
.pipe(plumber())
.pipe(react())
.pipe(uglify())
.pipe(plumber.stop())
.pipe(connect.reload())
.pipe(gulp.dest(assets + '/js'));
});
/*
* ---------------------------------------
* Sass
* ---------------------------------------
**/
var sass = require('gulp-sass');
gulp.task('sass', function(){
return gulp.src('./src/sass/app.scss')
.pipe(plumber())
.pipe(sass({outputStyle:'compressed'}))
.pipe(plumber.stop())
.pipe(connect.reload())
.pipe(gulp.dest(assets + '/css'));
});
/*
* ---------------------------------------
* Watch
* ---------------------------------------
**/
gulp.task('watch', function(){
gulp.watch('./src/jade/**/*.jade', ['jade']);
gulp.watch('./src/react/**/*.jsx', ['react']);
gulp.watch('./src/sass/**/*.scss', ['sass']);
});
/*
* ---------------------------------------
* Connect(livereload)
* ---------------------------------------
**/
gulp.task('connect', function(){
connect.server({
root: [root],
port: 9000,
livereload: true
});
});
/*
* ---------------------------------------
* Default Task
* runs the array of tasks we provide it
* ---------------------------------------
**/
gulp.task('default', ['jade', 'react', 'sass', 'watch', 'connect']);
要初始化,只需运行 gulp,它将调用它的默认任务
gulp
关于Codeigniter 和 React.JS 设置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30504206/