Please add some documentation for this project

[acrolink]

I understand that this code should be used alongside with Drupal's Bootstrap base theme. However, I need to understand, is this a sub-theme? or more basically, where do I need to git clone this code? inside a Bootstrap's less/cdn starter-kit clone? Thanks.

[markhalliwell]

No. But it is meant to be used in a sub-theme.

I haven't gotten around to finishing/documenting this and I apologize for that.

Basically, this module's primary purpose is meant to help standardize how a sub-theme is compiled (using LESS or SASS) based on the configuration provided in a sub-theme's package.json:

  "drupal-bootstrap": {
    "preprocessor": "sass",
    "package": "bootstrap-sass",
    "version": "3.3.6"
  },

If this were present in your sub-theme's package.json file, it would download and install the necessary preprocessor (sass) and the necessary bootstrap library framework (bootstrap-sass) and specific version (3.3.6).

In your Gruntfile.js, add the following config:

  compile: {
    // node-sass options.
    options: {},
    bootstrap: {
      files: [{
        expand: true,
        cwd: 'css/src', // Path to your .scss source files
        src: ['**/*.scss', '!**/_*.scss'], // Skip sass partials.
        dest: 'css/prod', // Output directory.
        ext: '.css'
      }]
    }
  }

Then run grunt compile and it should work like a charm.

[acrolink]

@markcarver Thanks for the explanation, that clarified things for me. So, I understand that I need to create a sub-theme based on the Drupal's Bootstrap LESS sub-theme, download the Bootstrap source into the sub-theme/bootstrap folder and then git clone your work inside the sub-theme's base directory.

I still wonder, would this setup make the browser reload the page whenever I make changes to the scss source files? If not, how to achieve that, which ruby gem or node module do I need to make the browser automatically reload the page upon changing the scss files on the server?

Thank you very much.

[markhalliwell]

download the Bootstrap source into the sub-theme/bootstrap folder and then git clone your work inside the sub-theme's base directory

No.

1. Install NodeJS
2. Install Grunt CLI
3. Create a Drupal Bootstrap sub-theme.
4. Navigate to that sub-theme in terminal.
5. Run npm init to create a package.json file.

6. Edit package.json to add the following somewhere as a top level item:

   "drupal-bootstrap": {
    "preprocessor": "less", // or "sass" if you prefer
    "package": "bootstrap", // or "bootstrap-sass", if you're using SASS
    "version": "3.3.6" // latest 3.x.x release version
   },

7. Run npm install grunt-drupal-bootstrap --save-dev. This is actually how you install this project, not git cloning it.

8. Create a Gruntfile.js file in the root of your sub-theme containing (this is based off of the LESS starter kit, customize as needed):

   module.exports = function(grunt) {
    // Project configuration.
    grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),
      compile: {
        // less options.
        options: {},
        bootstrap: {
          // Can be any "files" grunt object/array type.
          // @see http://gruntjs.com/configuring-tasks#files
          files: {
            'css/style.css': ['style.less']
          }
        }
      }
    });
   
    // Load the plugin that provides the drupal-bootstrap "compile" and "install" tasks.
    grunt.loadNpmTasks('grunt-drupal-bootstrap');
   
    // Default task(s).
    grunt.registerTask('default', ['compile']);
   };

9. Run grunt install to install this project. This is what will install the LESS or SASS preprocessor and also the Bootstrap [SASS] framework library for you automatically, you do not need to download them manually.
10. Run grunt, or more specifically grunt compile, to compile the source code. Once finished, you should have a compiled source in ./sub_theme/css/style.css.

[acrolink]

@markcarver thank you very much .. Looking forward to give it a serious test drive ..

[markhalliwell]

Sure, my pleasure. Please keep in mind that this is still rudimentary at best. I most certainly welcome feedback.

[acrolink]

There is a lot of required things eventemitter2 , glob etc.. It looks like I need to install each of them one by one. They should be stated somewhere in the code and get installed automatically. I guess, for all my projects, I will create a global SASS folder where I would place my scss files (each projects' files in separate directory) and just have sass --watch do the work. For browser reload upon editing scss, I will see what I can do. But this method of grunt-drupal-bootstrap would just consume a lot of disk space in case I implement this approach under each one of my projects. Maybe things are less complicated than I think, but node_modules always made headache for me (with all dependencies and versions and errors). I had better experiences with Ruby gems. Will have a look into this later. Thanks for all the help.

[markhalliwell]

It looks like I need to install each of them one by one. ... Maybe things are less complicated than I think, but node_modules always made headache for me (with all dependencies and versions and errors).

Um... no, you don't.... you're supposed to let node/npm do all this for you... automatically. It sounds to me like you have zero experience with node/npm and/or grunt. I really think you should do some reading up on what all of these tools are before attempting to use this project.