Node.js   发布时间:2022-04-24  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了gruntjs – Sails.js与React.js,如何正确执行?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我想在我的Sails.js应用程序中集成React.js browserify.

为此,我使用咕噜插件grunt-react.

我创建了一个文件/tasks/config/browserify.js

@H_861_11@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'); };

然后我在compileAssets.js和synCassets.js中添加了一行:

// compileAssets.js

module.exports = function (grunt) {
    grunt.registerTask('compileAssets',[
        'clean:dev','stylus:dev','browserify',// <<< this added
        'copy:dev'
    ]);
};

// synCassets.js

module.exports = function (grunt) {
    grunt.registerTask('synCassets',[
        'stylus:dev',// <<< this added
        'sync:dev'
    ]);
};

然后我修改了一行在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');
};

它工作!

但是我觉得我没有做到这一点.

如果我取消注释行dev:{和}在/tasks/config/browserify.js这样:

@H_861_11@module.exports = function(grunt) { grunt.config.set('browserify',{ dev: { /// <<< this uncommented options: { transform: [ require('grunt-react').browserify ],dest: '.tmp/public/js/app.js' } } /// <<< this uncommented }); grunt.loadNpmTasks('grunt-browserify'); };

如果我在compileAssets.js和synCassets.js中进行更改:

// compileAssets.js

module.exports = function (grunt) {
    grunt.registerTask('compileAssets','browserify:dev',// <<< this added :dev
        'copy:dev'
    ]);
};

// synCassets.js

module.exports = function (grunt) {
    grunt.registerTask('synCassets',// <<< this added :dev
        'sync:dev'
    ]);
};

这是行不通的!

值得担心吗?

为什么我在compileAssets.js和synCassets.js文件添加browserify:dev时不起作用?

解决方法

我找到了正确的解决方案.

UPD:现在我们可以使用https://github.com/erikschlegel/sails-generate-reactjs

大佬总结

以上是大佬教程为你收集整理的gruntjs – Sails.js与React.js,如何正确执行?全部内容,希望文章能够帮你解决gruntjs – Sails.js与React.js,如何正确执行?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。