css - 无法使用 grunt 编译 Bootstrap css

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

咕噜文件:

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)任务”并建议下载我已经安装的 jekyll。我在网上读到“grunt dist”应该足够了 - 它正确吗？

Answer 1

使用“node js 命令行”而不是常规命令行对我有用。

Windows:开始 > Node.js 命令提示符

我遵循了 this 中的步骤文章，它终于奏效了。