Super simple Development structure with gulp + npm

Super simple Development structure with gulp + npm

Here I’m showing you “how to set up the development environment with gulp task runner and npm”.

the easiest way to set up a structure on the go.

it’ll be very useful if you are a frontend or HTML CSS developer!

Follow the steps below and rock.

Note: Before you start make sure you have installed npm globally

Step1: Prepare the working folder structure as below (Exact name required!)

  • dev
    • CSS
    • images
    • js
    • fonts
    • scss
      • styles.scss
      • _variables.scss

Note: The above structure is a must for advantages of this setup, all the CSS, fonts, images, and js file copy in there folder in build version, also files in scss will compile and output generated CSS files in build/CSS folder.

All the images will be optimized by our code and placed into the build/images folder

also add all the Html file which you need in your project I dev folder. it just for making workflow easy as we have to maintain only the dev folder.

Step 2: Writing package.json file

Drill down to folder where you want to set up project! and create a file named “package.json” and copy code below!

{
  "name": "PROJECTNAME",
  "version": "1.0.0",
  "description": "PROJECT DESCRIPTION",
  "main": "index.js",
  "scripts": {
    "start": "gulp"
  },
  "author": "Auther",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.26.7",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^6.1.0",
    "gulp-concat": "^2.6.1",
    "gulp-image": "^5.1.0",
    "gulp-sass": "^4.0.2",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-uglify": "^3.0.2"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.12.0",
    "animate.css": "^3.7.2",
    "bootstrap": "^4.4.1",
    "imagesloaded": "^4.1.4",
    "isotope-layout": "^3.0.6",
    "jquery": "^3.4.1",
    "justifiedGallery": "^3.7.0",
    "swiper": "^4.5.1",
    "wow.js": "^1.2.2"
  }
}

Step 3: Writing gulpfile.js file

second file you have to write is “gulpfile.js” copy code below and pest into that file

const gulp = require("gulp");

// Requires the gulp-sass plugin
const autoprefixer = require("gulp-autoprefixer"),
  sass = require("gulp-sass"),
  //  gutil = require('gulp-util'),
  bs = require("browser-sync").create(),
  uglify = require("gulp-uglify"),
  concat = require("gulp-concat"),
  sourcemaps = require("gulp-sourcemaps"),
  image = require("gulp-image");

// copy HTML files from dev to build folder
gulp.task("files", function() {
  return gulp
    .src("dev/*.html")
    .pipe(gulp.dest("build/"));
});

// compile scss files
gulp.task("sass", function() {
  return gulp
    .src("dev/scss/**/*.scss")
    .pipe(sourcemaps.init())
    .pipe(sass({ outputStyle: "compact" })) //.on('error', gutil.log.bind(gutil, 'Sass Error')) // 'compressed' for one line css
    .pipe(
      autoprefixer({
        browsers: ["last 4 versions"],
        cascade: false
      })
    )
    .pipe(sourcemaps.write("./"))
    .pipe(gulp.dest("build/css"))
    .pipe(bs.stream());
});

// combine and minify js file to plugins.js
gulp.task('scripts', function () {
    return gulp.src(
        [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.bundle.js",
          "node_modules/imagesloaded/imagesloaded.pkgd.min.js",
          "node_modules/swiper/dist/js/swiper.js",
          "node_modules/wow.js/dist/WOW.js",
          "node_modules/isotope-layout/dist/isotope.pkgd.min.js",
          "node_modules/justifiedGallery/dist/js/jquery.justifiedGallery.min.js"
        ]
    )
        .pipe(concat('plugins.js'))
        .pipe(uglify())
        .pipe(gulp.dest('build/js/'));
});

// copy additional js files to build/js
gulp.task("js", function() {
  return gulp
    .src("dev/js/*")
    .pipe(gulp.dest("build/js/"));
});

// optimize images and copy in build/images folder
gulp.task("image", function() {
  return gulp
    .src("dev/images/*")
    .pipe(image())
    .pipe(gulp.dest("build/images/"));
});

// copy extra fonts from dev/fonts also copy fontawesome fonts from node_modules
gulp.task("fonts", function() {
  return gulp
    .src([
      "node_modules/@fortawesome/fontawesome-free/webfonts/*",
      "dev/fonts/*"
      ])
    .pipe(gulp.dest("build/fonts/"));
});

// browser reload functionality
gulp.task("bs", function() {
  bs.init({
    server: {
      baseDir: "./build/"
    }
  });
  gulp.watch("dev/scss/**/*.scss", gulp.series("sass"));
  gulp.watch("dev/**/*.html").on("change", function(){
    return gulp
    .src("dev/*.html")
    .pipe(gulp.dest("build/"));
  });
  gulp.watch("build/**/*.html").on("change", bs.reload);
  gulp.watch("./**/*.js").on("change", bs.reload);
});

// gulp default tasks
gulp.task("default", gulp.series("files", "sass", "scripts", "js", "image", "fonts", "bs"));

Step 4: Writing styles.scss and _variables.scss files

styles.scss contains all the scss files which are used in the project.

you can add more when required! variables are the basic setup requirements also you can make more your own and use it in future development!

/*Main stylesheet*/
@import "variables";

/*animation css*/
@import "../../node_modules/animate.css/animate";
/*bootstarp css*/ 
@import "../../node_modules/bootstrap/scss/bootstrap";
/*swiper slider css*/
@import "../../node_modules/swiper/src/swiper";

/*eanble if want swiper default pagination style*/
@import "../../node_modules/swiper/src/components/pagination/pagination";

@import "../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
@import "../../node_modules/@fortawesome/fontawesome-free/scss/regular";
@import "../../node_modules/@fortawesome/fontawesome-free/scss/solid";
@import "../../node_modules/@fortawesome/fontawesome-free/scss/brands";
@import "../../node_modules/@fortawesome/fontawesome-free/scss/v4-shims";

// other scss import here
// variables

// plugin variables override
$primary: #4dbb6d;
$fa-font-path: "../fonts";
$themeColor: #4dbb6d;
$font-family-base: 'Poppins';

You can download the ready structure! Click here

below are related links for detailed documentation!

This Post Has One Comment

  1. himanshu

    very helpful!!!

Leave a Reply