I want to integrate React.js + browserify in my Sails.js-application.
For this I use a grunt-plugin grunt-react .
I created a file /tasks/config/browserify.js
module.exports = function(grunt) {
grunt.config.set('browserify', {
//dev: {
options: {
transform: [ require('grunt-react').browserify ],
extension: 'jsx'
},
app: {
src: 'assets/jsx/app.jsx',
dest: '.tmp/public/js/app.js'
}
//}
});
grunt.loadNpmTasks('grunt-browserify');
};
Then I added a line in compileAssets.js
and syncAssets.js
:
// compileAssets.js
module.exports = function (grunt) {
grunt.registerTask('compileAssets', [
'clean:dev',
'stylus:dev',
'browserify', // <<< this added
'copy:dev'
]);
};
and
// syncAssets.js
module.exports = function (grunt) {
grunt.registerTask('syncAssets', [
'stylus:dev',
'browserify', // <<< this added
'sync:dev'
]);
};
Then i modified a line in copy.js
.
// copy.js
module.exports = function(grunt) {
grunt.config.set('copy', {
dev: {
files: [{
expand: true,
cwd: './assets',
src: ['**/*.!(styl|jsx)'], /// <<< this modified
dest: '.tmp/public'
}]
},
build: {
files: [{
expand: true,
cwd: '.tmp/public',
src: ['**/*'],
dest: 'www'
}]
}
});
grunt.loadNpmTasks('grunt-contrib-copy');
};
And it worked!
But I think I did not do it quite right.
If i uncommented line dev: {
and }
in /tasks/config/browserify.js
like this:
module.exports = function(grunt) {
grunt.config.set('browserify', {
dev: { /// <<< this uncommented
options: {
transform: [ require('grunt-react').browserify ],
extension: 'jsx'
},
app: {
src: 'assets/jsx/app.jsx',
dest: '.tmp/public/js/app.js'
}
} /// <<< this uncommented
});
grunt.loadNpmTasks('grunt-browserify');
};
And if I make changes in compileAssets.js
and syncAssets.js
:
// compileAssets.js
module.exports = function (grunt) {
grunt.registerTask('compileAssets', [
'clean:dev',
'stylus:dev',
'browserify:dev', // <<< this added :dev
'copy:dev'
]);
};
and
// syncAssets.js
module.exports = function (grunt) {
grunt.registerTask('syncAssets', [
'stylus:dev',
'browserify:dev', // <<< this added :dev
'sync:dev'
]);
};
it does not work!
Is it worth worrying about it?
And why is it not working when I add browserify: dev
in compileAssets.js
and syncAssets.js
files?
I found the right solution.
UPD: Now, we can use https://github.com/erikschlegel/sails-generate-reactjs
I have created grunt-reactify to allow you to have a bundle file for a JSX file, in order to make it easier to work with modular React components. All what you have to do is to specify a parent destination folder and the source files:
grunt.initConfig({ reactify: { 'tmp': 'test/**/*.jsx' }, })
In Sails, Go to the tasks/config folder and create a new file "reactify.js" and Insert the following code:
module.exports = function (grunt) { grunt.config.set('reactify', { '[Destination folder]': '[folder containing React Components]/**/*.jsx' }); grunt.loadNpmTasks('grunt-reactify'); };
Then go to the file tasks/register/compileAssets.js and add reactify:
module.exports = function (grunt) { grunt.registerTask('compileAssets', [ 'clean:dev', 'jst:dev', 'less:dev', 'copy:dev', 'coffee:dev', 'reactify' ]); };
and that's it !
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.