Question

网上有很多教程，但经过两天的努力 - 我必须得到一些帮助。我正在尝试向Bootstrap添加一个名称空间，以便我可以在Salesforce中使用它而不会干扰Salesforce的样式表。我的目标是用.bs {}包装bootstrap.less所以我可以在我的页面上将它作为资源引用。似乎无论如何，bootstrap.css都没有编译。

Bootstrap Test v2
├───bootstrap-3.3.7
    ├───Gruntfile.js
    |───dist
    |     |───css
    |          |───bootstrap.css
    |───less
          |───bootstrap.less

重现的步骤：

1）修改bootstrap.less（用.bs {}包装内容）

2）导航到Bootstrap Test V2

3）运行命令'grunt dist'

输出：

C:\Users\json\Desktop\Bootstrap\Bootstrap Test v2>grunt dist
(node:8444) ExperimentalWarning: The http2 module is an experimental API.
Running "clean:dist" (clean) task
>> 1 path cleaned.

Running "less:compileCore" (less) task
>> 1 stylesheet created.
>> 1 sourcemap created.

Running "less:compileTheme" (less) task
>> 1 stylesheet created.
>> 1 sourcemap created.

Running "autoprefixer:core" (autoprefixer) task
>> 1 autoprefixed stylesheet created.
>> 1 sourcemap created.

Running "autoprefixer:theme" (autoprefixer) task
>> 1 autoprefixed stylesheet created.
>> 1 sourcemap created.

Running "csscomb:dist" (csscomb) task
>> Using custom config file "less/.csscomb.json"...
>> Sorting file "dist/css/bootstrap-theme.css"...
>> Sorting file "dist/css/bootstrap.css"...

Running "cssmin:minifyCore" (cssmin) task
>> 1 sourcemap created.
>> 1 file created. 146.01 kB → 121.2 kB

Running "cssmin:minifyTheme" (cssmin) task
>> 1 sourcemap created.
>> 1 file created. 26.13 kB → 23.41 kB

Running "copy:fonts" (copy) task
Created 1 directory, copied 5 files

Running "concat:bootstrap" (concat) task

Running "uglify:core" (uglify) task
File dist/js/bootstrap.min.js created: 69.71 kB → 37.05 kB
>> 1 file created.

Running "commonjs" task
File dist/js/npm.js created.

Done.


Execution Time (2018-05-23 23:58:31 UTC+3)
clean:dist           77ms  █ 2%
less:compileCore    994ms  ███████████ 25%
less:compileTheme   146ms  ██ 4%
autoprefixer:core   538ms  ██████ 14%
autoprefixer:theme   90ms  █ 2%
csscomb:dist         1.1s  ████████████ 28%
cssmin:minifyCore   421ms  █████ 11%
cssmin:minifyTheme   53ms  █ 1%
copy:fonts           48ms  █ 1%
uglify:core         427ms  █████ 11%
Total 3.9s

gruntfile：

module.exports = function(grunt) {
  require('jit-grunt')(grunt);

  grunt.initConfig({
    less: {
      development: {
        options: {
          compress: true,
          yuicompress: true,
          optimization: 2
        },
        files: {
          "dist/css/bootstraptest.css": "less/bootstrap.less" // destination file and source file
        }
      }
    },
    watch: {
      styles: {
        files: ['less/**/*.less'], // which files to watch
        tasks: ['less'],
        options: {
          nospawn: true
        }
      }
    }
  });

  grunt.registerTask('default', ['less', 'watch']);
};

     module.exports = function(grunt) {
         grunt.initConfig({

             less: {
                 development: {
                     options: {
                         paths: ["assets/css"]
                     },
                     files: {"dist/css/bootstrap.css": "less/bootstrap.less"}
                 },
                 production: {
                     options: {
                         paths: ["assets/css"],
                         cleancss: true
                     },
                     files: {"dist/css/bootstrap.css": "less/bootstrap.less"}
                 }
             }
         });
         grunt.loadNpmTasks('grunt-contrib-less');
         grunt.registerTask('default', ['less']);
     };

注意： 1）使用'grunt'命令对我不起作用，它会抛出错误'正在运行'jekyll：docs“（jekyll）task”并建议下载我已安装的jekyll。我在网上看到'grunt dist'应该足够了 - 它是否正确？

Answer 1

使用＆＃39;节点js命令行＆＃39;而不是常规命令行为我做了诀窍。

Windoes：开始＆gt; Node.js命令提示符

我按照this文章中的步骤进行操作，最终有效。

无法使用grunt

1 个答案: