Node Js

Bootnews uses NPM scripts for its build system. Our package.json includes convenient methods for working with the framework, including compiling code, running tests, and more.

To use our build system and run our documentation locally, you’ll need a copy source files (Bootnews template) and Node js. Follow these steps and you should be ready to rock:

  1. Download and install Node.js, which we use to manage our dependencies.
  2. Navigate to the root /Bootnews directory and run npm install to install our local dependencies listed in package.json.
  3. Install following gulp task in terminal
    • npm install gulp-cli -g
    • npm install browser-sync
    • npm install del
    • npm install gulp-autoprefixer
    • npm install gulp-cache
    • npm install gulp-changed
    • npm install gulp-concat
    • npm install gulp-cssnano
    • npm install gulp-rename
    • npm install gulp-sass
    • npm install gulp-uglifyjs
  4. When completed, you’ll be able to run the various commands provided from the command line.

If you are using MacOS please use sudo keyword in the command because they need administrator rights to install Gulp globally.



Gulp

After install gulp and node modules. Now you have an integrated workflow.

Automate Workflow
  • Run gulp in terminal and making some changes to assets/scss/**/*.scss and save it.2 files will automate update assets/css/theme.css and assets/vendor/bootstrap/dist/css/bootstrap.css
You also can running other gulp task with split terminal
  • Run gulp minCSSTHEMECompressing assets/css/theme.css to minify files assets/css/theme.min.css
  • Run gulp minBOOTSTRAPCompressing assets/vendors/bootstrap/css/bootstrap.css to minify files assets/vendor/bootstrap/dist/css/bootstrap.min.css
  • Run gulp minJSTHEMECompressing assets/js/theme.js to minify files assets/js/theme.min.js
  • Run gulp minCSS Compressing all css to one files (bundle)
  • /assets/vendor/bootstrap/dist/css/bootstrap.css
  • /assets/vendor/fontawesome-free/css/fontawesome-for-theme.css
  • /assets/css/theme.css
  • minify files assets/bundle/css/theme.min.css
  • Run gulp minJSCompressing all js to one files (bundle)
  • /assets/vendor/jquery/dist/jquery.min.js
  • /assets/vendor/popper.js/dist/popper.min.js
  • /assets/vendor/bootstrap/dist/js/bootstrap.min.js
  • /assets/vendor/sticky-kit/dist/sticky-kit.min.js
  • /assets/vendor/owl.carousel/dist/owl.carousel.min.js
  • /assets/vendor/vanilla-lazyload/dist/lazyload.min.js
  • /assets/vendor/smoothscroll-for-websites/SmoothScroll.js
  • /assets/js/theme.js
  • minify files assets/bundle/js/theme.min.js


Sass

You can editing SCSS from assets/scss/**/*.scss all variable is included in one file assets/scss/variable.scss.

You can running Gulp sass to editing your css from scss file
  • Run gulp sass after make changes in 
  • assets/scss/1 files will update assets/css/theme.css
  • Run gulp sass-bootstrap after make changes in assets/scss/1 files will update assets/vendor/bootstrap/dist/css/bootstrap.css
  • Run gulp sass-customizerCompressing assets/scss/vendor/customizer/demo.scss to css files assets/vendor/customizer/css/demo.css
  • Run gulp minCUSTOMIZERCompressing 
  • assets/vendor/customizer/css/demo.css 
  • to minify files assets/vendor/customizer/css/demo.min.css
  • Run gulp minJSCUSTOMIZERCompressing 
  • assets/vendor/customizer/js/demo.js
  • to minify files assets/vendor/customizer/js/demo.min.js


BrowserSync

Makes your browser testing workflow faster by synchronising URLs, interactions and code changes across multiple devices

Running Browser sync with Gulp serve and you can access browser from http://localhost:3000/ and starter pages can access from http://localhost:3000/html/home/index.html