Using Gulp to compile the Bootstrap Sass files

If you would like the option to customize the Bootstrap Sass files in order to use them in your project, you can automate the Sass compilation process by creating a Gulp task for it.

Visual Studio Code supports the ability to run tasks and analyze their results from inside it. Task can include many things such as compiling Sass, minifying CSS, or copying files to different folders.

In order to configure task inside Visual Studio Code, follow these steps:

  1. Inside Visual Studio Code, open the Command Palette by pressing the F1 key.
  2. Type the following inside the Command Palette and press Enter:
            Configure Task Runner
  3. Select Grunt from the list and press the Enter key.
  4. The command will automatically create a new folder called .vscode with a new tasks.json file inside it.
  5. You'll need Gulp and the gulp-sass plugin in order to compile the Bootstrap 4 SCSS files to CSS. To install this plugin, open the command prompt and enter the following commands, followed by the Enter key:
            npm install gulp gulp-sass
  6. After the necessary plugins have been installed, switch back to Visual Studio Code and change the contents of the tasks.json file to the following:
            { 
            "version": "0.1.0", 
            "command": "gulp", 
            "isShellCommand": true, 
            "tasks": [ 
                { 
                    "taskName": "compile-sass", 
                    "isBuildCommand": true, 
                    "showOutput": "always", 
                    "isWatching": true 
                } 
            ] 
        }
  7. Save the tasks.json file and add a new file called gulpfile.js to the root of your project.
  8. Change the contents of the gulpfile.js file to the following:
            var gulp = require('gulp'); 
        var gulpSass = require('gulp-sass'); 
 
        gulp.task('compile-sass', function () { 
            gulp.src('./bower_components/bootstrap/scss/bootstrap.scss') 
                .pipe(gulpSass()) 
                .pipe(gulp.dest('./wwwroot/css')); 
        });
  9. The previous changes will compile the bootstrap.scss SASS file located in the ./bower_components/bootstrap/scss/ folder and copy the CSS file to the wwroot/css folder as bootstrap.css.
  10. In order to run the compile-sass task, press the F1 key to bring up the Command Palette and type the following, or select it from the list of items:
            Tasks: Run Task
  11. This will return a list of available tasks configured in your project. Select compile-sass from the list.
  12. Visual Studio Code will show an output window with the result of the task:
    Using Gulp to compile the Bootstrap Sass files

After the compile-sass task has completed, you should see a bootstrap.css file inside the wwwrootcss folder. Your project layout should be similar to the following inside the Visual Studio Code Explorer:

Using Gulp to compile the Bootstrap Sass files
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.118.142.166