Need Advice? CALL: +61 417949565

Riksi - web design and development

  • Home
  • ABOUT US
  • OUR WORK
  • BLOG
  • CONTACT US
  • Home
  • BLOG
  • General
  • Gulp for Sass and Js file in project

Gulp for Sass and Js file in project

Gulp for Sass and Js file in project

Gulp is a cross-platform, streaming task runner that lets you automate many development tasks. At a high level, gulp reads files as streams and pipes the streams to different tasks.

to use Gulp, you need to first install the gulp dependencies package and add the gulpfuke.js file into the root of the project.

1
2
3
4
5
 
 
npm install --global gulp-cli
 
 

Above code will add the gulp into the composer.json file:

1
2
3
4
5
6
7
8
9
10
 
 
{
...
    "devDependencies": {  
               "gulp": "version"
      }
}
 
 

Some of the packages you can use to automate the process are:

  • gulp-uglify (minify js files)
  • gulp-concat (combining the js file)
  • gulp-plumber (catches errors and prevents the pipe from breaking)
  • gulp-minify-css (Combine and minify your CSS files)
  • gulp-iconfont (converts SVG icons being used into a suite of icon fonts that work in IE and other browsers)
  • gulp-autoprefixer (prefix the css)
  • gulp-sass ( compile your Sass files)
  • gulp-sourcemap (It automatically creates source maps from your code. )
  • gulp-wp-rev (add hash to the js and css file in wp to clear cache after each run)
  • gulp-load-plugin (include all of your Gulp plugins by requiring them.)
    • var $ = require('gulp-load-plugins')();
      …pipe($.somePlugin())

after installing those packages, the package.json file should contains the following section

1
2
3
4
5
6
7
8
9
10
11
12
 
 
{
...
   "devDependencies":{
     "gulp":"version",
     "gulp-sass": "version",
     ....and all other gulp packages mentioned above
   }
}
 
 

In package.json, we can add the browserlinst section to use it in gulp later:

1
2
3
4
5
6
7
8
9
10
11
 
 
{
  "browserslist": [
    "> 0.9%",
    "last 3 versions",
    "IE 10"
  ]
}
 
 

How to use Gulp

to use the gulp, you need to add the package

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
 
const gulp = require('gulp');
const gulpLoadPlugins = require('gulp-load-plugins');
const plugins = gulpLoadPlugins();
 
function generateCss(){
return gulp.src('./**/*.scss)
        .pipe(plugins.plumber())
        .pipe(plugins.sass().on('error', sass.logError))
        .pipe( plugins.autoprefixer( 'last 2 version','ie 8', 'ie 9'),
        .pipe(plugins.dest("/assets/css"))
}
 
 

if you want to use the browser list in package.json as the autoprefixer option, use the code below:

1
2
3
4
5
6
7
8
9
10
 
 
.pipe(      
     autoprefixer({        
          cascade: false,        
          overrideBrowserslist:  require("./package.json").browserslist,      
     })  
)
 
 

To add the javascript to gulp file, use the code below:

1
2
3
4
5
6
7
8
9
10
11
12
 
 
function compileJs(){
     return gulp.src('./**/*.js')
           .pipe(plugins.sourcemap.init())
           .pipe(plugins.concat("final.js"))
           .pipe(plugins.uglify())
           .pipe(plugins.sourcemap.write())
           .pipe(gulp.dest("/assets/js")
}
 
 

For WordPress file, we can add the hash to the scripts and CSS file loaded into WordPress using the following code “src“

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
 
function wp_hash(){
     return gulp.src("./enquescriptfile.php")
     .pipe(
          plugins.wprev([
               {
                    handle<strong>:</strong> 'my-styles',
                    file<strong>:</strong> './style.css',
                    type<strong>:</strong> 'css'
               }
          ])
    
     )
     .pipe(gulp.dest("./")
}
 
 

You can then create a watch file to look for changes and run the function above:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
function compileJs() {
  gulp.watch("./**/*.scss", gulp.parallel(generateCss));
  gulp.watch(
    "./**/*.js",
    gulp.parallel(compileJs)
  );
}
 
const watch = gulp.parallel(generateCss, compileJs, compileJs);
export.watch = watch
 
 
Nick
Friday, 05 April 2019 / Published in General

What you can read next

Calculate EX-GST price
Complete Guide to setup remote Git on your site
Migrate WordPress server from Local to Live

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Archive

  • General
    • Smart Home
  • Web developing
    • command line
    • CSS
    • General
    • git
    • Javascript
    • Laravel
    • Magento
    • MySQL
    • PHP
    • Security
    • Shopify
    • Wordpress

Recent Posts

  • Install HomeAssistant on Raspberry pi

  • Shopify ERR_INVALID_ARG_TYPE Error

Riksi

Riksi is a creative, professional & cutting-edge custom web design and development company.

HERE TO HELP

  • BLOG
  • Contact Us
  • Our Work
  • About Us

New on Blog

  • Install HomeAssistant on Raspberry pi

    To install it, We need to connect the SD card t...
  • Shopify ERR_INVALID_ARG_TYPE Error

    fix the Internal Server Error occurred while in...

GET IN TOUCH

T: (+61) 417 949 565
Email: [email protected]

Contact Us
Fill out the form and our team will be in touch with you promptly. Thank you for your interest!

AU & NZ
T: (+613) 9014 9495
T: (+61) 417 949 565
Email: [email protected]


US & Canada
Email: [email protected]

NAME

EMAIL

PROJECT TYPE
PROJECT BUDGET

MESSAGE

Could not authenticate you.

Whats on Instagram

Loading...

Tags

.htaccess calculation cherry pick composer content css deployer documentation error flex general knowledge get started git git stash hack javascript log mysql package password php PHP Trick replace scss shopify sidebar ssh symlink sync trick ubuntu windows 10 wordpress trick wp
  • GET SOCIAL
Riksi - web design and development

© 2020 All rights reserved. Riksi.com.

TOP