Sails.js use different layouts with different js libraries

I am creating my first nodejs / sails.js project, I want to use 3 different layouts for three different cases:

frontend_layout.ejs
admin_layout.ejs
mobile_layout.ejs
  • In frontend_layout.ejs, I want to load bootstrap.css, jquery.js and bootstrap.js.
  • In admin_layout.ejs, I want to load bootstrap.css, angular.js and ui-bootstrap-tpls.js (angular -ui js library).
  • In mobile_layout.ejs I want to load ionic.css and ionic.bundle.js

I created 3 folders in sailsProject / views / which are admin_pages, mobile_pages and frontend_pages, 3 layout.ejs files are in each of these folders respectively, but no matter what layout I load, it always includes all css / js in assets / js and assets / styles. I know that I need to do something for pip.js, but how exactly? I am not very efficient, but I would really appreciate it if someone could tell me which configuration files to change and how ... Thank you!

+4
source share
2 answers

- , , Sail /uglify javascript "sails lift -prod" javascript, JS, CSS .

2 - layout.ejs layoutadmin.ejs. /assets/jsadmin, admin javascript. existing/assets/js folder as-is javascript -.

, /assets/js ( , layout.ejs):

<!--SCRIPTS-->
<!--SCRIPTS END-->

/assets/jsadmin ( "" , layoutadmin.ejs. ):

<!--SCRIPTS_ADMIN-->
<!--SCRIPTS_ADMIN END-->

.

... ( ), , assets/jsadmin js .

tasks/pipe.js, jsAdminFilesToInject, jsFilesToInject, , js jsAdmin.

var jsAdminFilesToInject = [

  // Load sails.io before everything else
  //'jsAdmin/dependencies/sails.io.js',

  // Dependencies like jQuery, or Angular are brought in here
  'jsAdmin/dependencies/**/*.js',

  // All of the rest of your client-side js files
  // will be injected here in no particular order.
  'jsAdmin/**/*.js'
];

. pipe.js.

module.exports.jsAdminFilesToInject = jsAdminFilesToInject.map(function(path) {
  return '.tmp/public/' + path;
});

tasks/config/sails-linker.js, devJsAdmin, .jsAdminFilesToInject, pipe.js .

    devJsAdmin: {
        options: {
            startTag: '<!--SCRIPTS_ADMIN-->',
            endTag: '<!--SCRIPTS_ADMIN END-->',
            fileTmpl: '<script src="%s"></script>',
            appRoot: '.tmp/public'
        },
        files: {
            '.tmp/public/**/*.html': require('../pipeline').jsAdminFilesToInject,
            'views/**/*.html': require('../pipeline').jsAdminFilesToInject,
            'views/**/*.ejs': require('../pipeline').jsAdminFilesToInject
        }
    },

tasks/register/linkAssets.js, devJsAdmin.

    'sails-linker:devJsAdmin',

, :

sails lift

http://localhost:1337/home - , layout.ejs, ( js):

<!--SCRIPTS-->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/jquery-1.10.2.js"></script>
<!--SCRIPTS END-->

http://localhost:1337/admin - , layoutadmin.ejs, (, jsAdmin):

<!--SCRIPTS_ADMIN-->
<script src="/jsAdmin/dependencies/jquery-1.10.2.js"></script>
<script src="/jsAdmin/knockout-3.3.0.debug.js"></script>
<!--SCRIPTS_ADMIN END-->

... (sails lift --prod), , , javascript, SCRIPTS_ADMIN.

jsAdmin grunt tasks/config/concat.js, jsAdminFilesToInject pipe.js concat/productionAdmin.js.

    jsAdmin: {
        src: require('../pipeline').jsAdminFilesToInject,
        dest: '.tmp/public/concat/productionAdmin.js'
    },

distAdmin grunt tasks/config/uglify.js, make concat/productionAdmin.js "", min/productionAdmin.min.js.

    distAdmin: {
        src: ['.tmp/public/concat/productionAdmin.js'],
        dest: '.tmp/public/min/productionAdmin.min.js'
    }

prodJSAdmin tasks/config/sails-linker.js, min/productionAdmin.min.js SCRIPTS_ADMIN.

    prodJsAdmin: {
        options: {
            startTag: '<!--SCRIPTS_ADMIN-->',
            endTag: '<!--SCRIPTS_ADMIN END-->',
            fileTmpl: '<script src="%s"></script>',
            appRoot: '.tmp/public'
        },
        files: {
            '.tmp/public/**/*.html': ['.tmp/public/min/productionAdmin.min.js'],
            'views/**/*.html': ['.tmp/public/min/productionAdmin.min.js'],
            'views/**/*.ejs': ['.tmp/public/min/productionAdmin.min.js']
        }
    },

, prodJSAdmin prod grunt, prod.js.

    'sails-linker:prodJsAdmin',

:

sails lift --prod

http://localhost:1337/home - , , ( production.min.js):

<!--SCRIPTS-->
<script src="/min/production.min.js"></script>
<!--SCRIPTS END-->

http://localhost:1337/admin - , layoutadmin.ejs, ( productionAdmin.min.js):

<!--SCRIPTS_ADMIN-->
<script src="/min/productionAdmin.min.js"></script>
<!--SCRIPTS_ADMIN END-->
+11

Sails css (/) STYLES STYLES END js (/js) SCRIPTS SCRIPTS END.

<!--STYLES-->
<!--STYLES END-->

.
.
.

<!--SCRIPTS-->
<!--SCRIPTS END-->

pipe.js. css /. cssFilesToInject.

'styles/**/*.css'

, . . ( , css , , .)

js . js /js. jsFilesToInject. js . grunt globbing patterns , .

, , , (STYLES SCRIPTS).

, ,

<!--STYLES-->
<!--STYLES END-->
<!--STYLES SPECIFIC TO THIS LAYOUT-->
<link rel="stylesheet" href="/styles/some_layout_specific.css">
0

All Articles