个人中心
gpt4 book ai didi

javascript - 如何在 Sails.js 0.11 中添加自定义 CSS 和 JS 文件？

转载 作者：搜寻专家 更新时间：2023-11-01 00:00:44 24 4
gpt4 key购买 nike

如何在 Sails.js 0.11 中添加自定义 CSS 和 JS 文件？

现在我的 tasks/pipeline.js 看起来像这样:

`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);
}

我的 Gruntfile.js 看起来像这样:

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);
};

bootstrap.css 文件路径为/api/assets/styles/bootstrap.css

bootstrap.js 文件的路径是/api/assests/js/bootstrap.js

jquery-1.11.3.min.js 的路径是/api/assests/js/dependencies/jquery-1.11.3.min.js

importer.less 文件如下所示:

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 看起来像这样:

<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>

从下面给出的网页的源代码可以看出，bootstrap文件和jquery文件没有被插入。

<!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>

最佳答案

js和css文件分别放在assets/js和assets/styles文件夹中。您的文件似乎在 api/assets

关于javascript - 如何在 Sails.js 0.11 中添加自定义 CSS 和 JS 文件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34368918/

24 4 0
文章推荐： javascript - Auth0 与 Socket.IO 强制认证
文章推荐： php - 形成对具有属性的 url 的操作
文章推荐： swift - 如何从 Swift 3 中的 TextView 中删除查找和共享
文章推荐： php - 如何使用 Shell 将 GET 变量传递给 php 文件？
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com