Codeigniter 和 React.JS 设置

Question

我打算为我的新项目使用 Codeigniter 和 ReactJS，

我需要知道如何设置项目文件夹以及将 .jsx 文件设置为 .js 的构建过程

然后将所有 .js 文件连接起来并缩小为 min.js

我正在考虑使用 GruntJS

Answer 1

改用 Gulp

我可能会建议您改用 gulp，它对 IMO 更友好。

如果我正在设置这样一个项目，我可能会从这样的文件夹结构开始，然后安装 我的节点模块。我很喜欢使用 (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

生成 gulpfile

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