Codeigniter和React.JS设置

问题描述

我打算为我的新项目设计Codeigniter和ReactJS，我需要知道如何设置项目文件夹和.jsx文件的构建过程，以be .js

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

我正在考虑使用GruntJS

解决方案

尝试使用Gulp

我可能会建议你使用gulp来代替它，这对新手来说更加友好。

如果我设置了这样一个项目，我可能会从这样的文件夹结构开始，然后安装
我的node_modules。我非常喜欢使用（sass，jade-php，livereload），但这些都是可选的。

文件夹结构

  package.json 
 gulpfile.js 
 
 / application 
 | views / 
 | ... 
 / public 
 | index.php 
 | css / 
 | js / 
 / vendor / codeigniter 
 / node_modules 
 / src 
 |反应
 app.jsx 
 | sass 
 app.scss 
 _variables.scss 
 | jade 
 views / //这个模仿的codeigniter的视图文件夹结构
 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'））; 
}）; 
 
 / * 
 * ----------------------------------- ---- 
 *观看
 * ----------------------------------- ---- 
 ** / 
 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（{$ b $ root root：[root]，
 port：9000，
 livereload：true 
}）; 
}）; 
 
 / * 
 * ----------------------------------- ---- 
 *默认任务
 *运行我们提供的任务数组
 * --------------------- ------------------ 
 ** / 
 gulp.task（'default'，['jade'，'react'，'sass'， 'watch'，'connect']）; 
  

要初始化运行gulp，它会调用它的默认任务

  gulp 
  

Im planning to have Codeigniter and ReactJS for my new project,

I need to know how to setup the project folders and the build process for the .jsx files to be .js

and then all the .js files to be concatenated and minified to be min.js

I'm thinking of using GruntJS

解决方案

Try Gulp instead

I might suggest you use gulp instead, it's much more beginner friendly IMO.

If I was setting up such a project I might start with a folder structure like this, and installmy node_modules. I quite like to use (sass,jade-php,livereload) but these are optional.

Folder structure

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

Requirements

node.js

You will need to install gulp globally first.

npm install gulp -g

CD into your project folder

cd c:/xampp/htdocs/project

Generate package.json

npm init

Generate gulpfile

touch gulpfile.js

Install Tools

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']);

To initialize just run gulp and it will call it's default task

gulp

这篇关于Codeigniter和React.JS设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！