Gulp for SASS implementation

In iCompilePost |  17 Feb 2017

This article I have compiled from several websites and had shorthand for quick understanding and setup nodeJs and use of Gulp for SASS implementation.

Short info on:

Gulp is a extremely powerful Java Script based task runner toolkit tool that helps you out automate with several tasks with the packages/plugins that can be managed/installed by using Node Package Manager. Here we are going to use Gulp on frontend development for SASS implementation. Few of the things mostly done with Gulp for frontend development like:

  1. Move files to another location
  2. Combine files (concatenate) into another file
  3. Reloading the browser automatically whenever a file is saved
  4. Using preprocessors like SASS or LESS
  5. Optimizing assets like CSS, JavaScript, and images etc

SASS( Syntactically Awesome Style Sheets ) is a scripting language that is interpreted into Cascading Style Sheets (CSS)

Node.js is a lightweight, efficient, event-driven, non-blocking I/O model JavaScript runtime application. Here we are going to use a one of the component of NodeJs npm (Node Package Manager:  npm website) using NodeJs CLI (Command Line Interface) component for installation of modules/packages for SASS.

Here I have using gulp modules/packages like:

  1. gulp(version: ^3.9.0): streaming build system in front-end web development
  2. gulp-sass(version: ^4.0.2): compiles SASS to CSS
  3. gulp-sourcemaps(version: ^2.6.1): generate css source maps
  4. gulp-notify(version: ^3.2.0): provides notification to use once task is complete
  5. gulp-uglify(version: ^3.0.1): minifies js files
  6. gulp-uglifycss(version: ^1.1.0): minifies css files
  7. gulp-concat(version: ^2.6.1): concatenates multiple js files
  8. gulp-rename(version: ^1.4.0): renames files
  9. gulp-changed(version: ^3.2.0): only change file wll be on watch
  10. gulp-imagemin(version: ^5.0.3): minification images
  11. browser sync(version: latest): auto reload browser on each change

Now let’s get started working with GULP:

Step 1 : create a project folder say “gulp-project”
Step 2 :  Install node.js  ( https://nodejs.org/en/ ).
Step 3 : After you install node.js then open Node.js CLI. This is a command line interface just like the window’s command prompt.
Step 4 : using CLI command go to the project folder path. The command to go to your project folder is similar to command prompt. For example: if your project folder is in D:/ xampp/htdocs/gulp-project   then you need to locate this on your CLI by command like ( “d:” , “cd xampp”, “cd htdocs” and “cd gulp-project” )
Step 5 : run npm init  command on your CLI. This command prompt us to answer a few questions about our project. Once completed, it will generate package.json file on your project folder. This file  will provide information about the project and its dependencies packages used.
Step 6 : now install the basic packages using npm command as below:
npm install gulp@^3.9.0 gulp-sass@^4.0.2

the above command will install the packages. You can also install other packages likewise with your requirements. These packages will be install in your project folder inside “node_modules” folder. And also check/open your “package.json”  file where those installed modules were listed.
Step 7 :  now create a working folders for SASS implementation. Create “app” folder and inside that folder create “scss”, “fonts”, “img”, “js”. And put scss files you can download from underscores.me , put some dummy images on “img” folder, and inside js create folder “custom” & “vendor” folder where all of you can put your custom js scripts and in “vendor” folder you can have other jquery libraries like:jquery-meanmenu etc.

This app folder is where actual working is done. Similarly, create a “assets”  folder for deploy of your work. And a index.html file with the link css and js to the assets folder path.  All the work done on “app” will compiles SASS to CSS and store in “assets” folder. Then you could just deploy the assets folder and main html file

|- app/
   |- scss/
   |- fonts/
   |- img/
   |- js/
      |- custom
      |- vendor
|- assets/
|- gulpfile.js
|- index.html

Step 8 :  create the gulpfile.js. if you have want my compile gulfile plz feel free to ask me.

Step 9 : now run the command “gulp” on the CLI after which your “assets” folder will be filled with compiled CSS files , JS files, img files in both min and unminify version, creating the folder as “css\style.css”, “css\style.min.css”, “js\vendor\vendor.js”, “js\vendor\vendor.min.js”  and “js/main.js” , “js/main.min.js” . This main.js is the compile version from the “custom” folder of the “app” folder.

Step 10 : edit scss files you downloaded from underscrore.me and compilation will be done to your “assets” folder. After you are done just deploy the “assets” folder with the index.html file.

 

Note: if anyone reading this post want to have a this demo then please feel free to mail me

 

Recent Posts
Categories