How do i add custom CSS and JS files in Sails.js 0.11 ?
Right now my tasks/pipeline.js looks like this:
`var tmpPath = '.tmp/public/';
var cssFilesToInject = [
'styles/bootstrap.css',
'styles/**/*.css'
];
var jsFilesToInject = [
'js/dependencies/sails.io.js',
'js/dependencies/jquery-1.11.3.min.js',
'js/dependencies/**/*.js',
'js/**/*.js',
];`
var templateFilesToInject = [
'templates/**/*.html'
];
module.exports.cssFilesToInject = cssFilesToInject.map(transformPath);
module.exports.jsFilesToInject = jsFilesToInject.map(transformPath);
module.exports.templateFilesToInject = templateFilesToInject.map(transformPath);
function transformPath(path) {
return (path.substring(0,1) == '!') ? ('!' + tmpPath + path.substring(1)) : (tmpPath + path);
}
My Gruntfile.js looks like this:
module.exports = function(grunt) {
var includeAll;
try {
includeAll = require('include-all');
} catch (e0) {
try {
includeAll = require('sails/node_modules/include-all');
}
catch(e1) {
console.error('Could not find `include-all` module.');
console.error('Skipping grunt tasks...');
console.error('To fix this, please run:');
console.error('npm install include-all --save`');
console.error();
grunt.registerTask('default', []);
return;
}
}
function loadTasks(relPath) {
return includeAll({
dirname: require('path').resolve(__dirname, relPath),
filter: /(.+)\.js$/
}) || {};
}
function invokeConfigFn(tasks) {
for (var taskName in tasks) {
if (tasks.hasOwnProperty(taskName)) {
tasks[taskName](grunt);
}
}
}
var taskConfigurations = loadTasks('./tasks/config'),
registerDefinitions = loadTasks('./tasks/register');
// (ensure that a default task exists)
if (!registerDefinitions.default) {
registerDefinitions.default = function (grunt) { grunt.registerTask('default', []); };
}
invokeConfigFn(taskConfigurations);
invokeConfigFn(registerDefinitions);
};
Path for bootstrap.css file is /api/assets/styles/bootstrap.css
Path for bootstrap.js file is /api/assests/js/bootstrap.js
Path for jquery-1.11.3.min.js is /api/assests/js/dependencies/jquery-1.11.3.min.js
importer.less files looks like this:
body{
padding-top: 60px;
padding-bottom: 40px;
}
.jumbotron{
text-align: center;
}
.jumbotron h2{
font-size: 1.5em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: gray;
}
index.ejs looks like this:
<div class="container">
<div class="jumbotron">
<h1>Shelfie</h1>
<h2>Here we go!</h2>
<a href="/user/new" class="btn btn-lg btn-success">Sign up</a>
</div>
As you can see from the source code of the webpage given below that the bootstrap files and the jquery file has not been inserted.
<!DOCTYPE html>
<html>
<head>
<title>Shelfie</title>
<!-- Viewport mobile tag for sensible mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--
Stylesheets and Preprocessors
==============================
You can always bring in CSS files manually with `<link>` tags, or asynchronously
using a solution like AMD (RequireJS). Or, if you like, you can take advantage
of Sails' conventional asset pipeline (boilerplate Gruntfile).
By default, stylesheets from your `assets/styles` folder are included
here automatically (between STYLES and STYLES END). Both CSS (.css) and LESS (.less)
are supported. In production, your styles will be minified and concatenated into
a single file.
To customize any part of the built-in behavior, just edit `tasks/pipeline.js`.
For example, here are a few things you could do:
+ Change the order of your CSS files
+ Import stylesheets from other directories
+ Use a different or additional preprocessor, like SASS, SCSS or Stylus
-->
<!--STYLES-->
<!--STYLES END-->
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Shelfie</h1>
<h2>Here we go!</h2>
<a href="/user/new" class="btn btn-lg btn-success">Sign up</a>
</div>
</div>
<!--
Client-side Templates
========================
HTML templates are important prerequisites of modern, rich client applications.
To work their magic, frameworks like Backbone, Angular, Ember, and Knockout require
that you load these templates client-side.
By default, your Gruntfile is configured to automatically load and precompile
client-side JST templates in your `assets/templates` folder, then
include them here automatically (between TEMPLATES and TEMPLATES END).
To customize this behavior to fit your needs, just edit `tasks/pipeline.js`.
For example, here are a few things you could do:
+ Import templates from other directories
+ Use a different template engine (handlebars, jade, dust, etc.)
+ Internationalize your client-side templates using a server-side
stringfile before they're served.
-->
<!--TEMPLATES-->
<!--TEMPLATES END-->
<!--
Client-side Javascript
========================
You can always bring in JS files manually with `script` tags, or asynchronously
on the client using a solution like AMD (RequireJS). Or, if you like, you can
take advantage of Sails' conventional asset pipeline (boilerplate Gruntfile).
By default, files in your `assets/js` folder are included here
automatically (between SCRIPTS and SCRIPTS END). Both JavaScript (.js) and
CoffeeScript (.coffee) are supported. In production, your scripts will be minified
and concatenated into a single file.
To customize any part of the built-in behavior, just edit `tasks/pipeline.js`.
For example, here are a few things you could do:
+ Change the order of your scripts
+ Import scripts from other directories
+ Use a different preprocessor, like TypeScript
-->
<!--SCRIPTS-->
<!--SCRIPTS END-->
</body>
</html>
