Skip to content

Automate and Enhance your development environment using Gulp

License

Notifications You must be signed in to change notification settings

littlemissbot/gulp-starterkit

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

37 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Gulp Starterkit GitHub followers

Automate and Enhance development environment using Gulp.

npm GitHub code size in bytes GitHub All Releases GitHub Release Date GitHub

System Requirements

Check for Node and NPM

NodeJS - refer https://nodejs.org/en/ to install.

$ node --version
v14.15.1

NPM is a distribution of NodeJS, no separate installation required.

$ npm --version
7.5.4

Gulp CLI - refer https://gulpjs.com/docs/en/getting-started/quick-start to install

$ gulp --version
CLI version: 2.3.0
Local version: 4.0.2
NPM Packages Used

NPM package dependencies for development environment automation and enhancements.

GitHub package.json dependency version (prod) GitHub package.json dependency version (prod) GitHub package.json dependency version (prod) GitHub package.json dependency version (prod)

"dependencies": {
    "browser-sync": "^2.27.9"
    "gulp": "^4.0.2"
    "gulp-concat": "^2.6.1"
    "gulp-data": "^1.3.1"
    "gulp-nunjucks-render": "^2.2.3"
    "gulp-rename": "^1.4.0"
    "gulp-sass": "^5.1.0"
    "gulp-uglify": "^3.0.2"
    "gulp-util": "^1.0.0"
 }

Gulp Features

Gulp Tasks
  1. Node server and browser/server reload on any file change.
  2. Compile SASS files into CSS files.
  3. Concat CSS files into one application.css file.
  4. Concat JS files into one application.js file.
  5. Nunjuck templating (using *.htm) to render HTML templates.
  6. Use data sets to generate dynamic content in nunjuck templates.
  7. Minify CSS application.css to appplication.min.css file.
  8. Minify JS application.js to application.min.js file.
Gulp Configuration File - gfconfig.json

Edit file to customise and design your own folder structure.

{
    "version": "1.0.0",
    "styles": [
        "src/assets/styles/application.css",
        "src/assets/styles/main.css"
    ],
    "scripts": [
        "src/assets/scripts/main.js"
    ],
    "images": [
        "src/assets/images/**/*.png",
        "src/assets/images/**/*.jpg",
        "src/assets/images/**/*.jpeg",
        "src/assets/images/**/*.gif",
        "src/assets/images/**/*.svg"
    ],
    "fonts": "src/assets/fonts",
    "sass": "src/assets/sass/**/*.scss",
    "nunjucks": "src/app/pages/**/*.htm",
    "nunjuck_templates": "src/app/partials",

    "data": "./src/data/sample1.json",

    "dest": {
        "html": "dist",
        "styles": "dist/css",
        "scripts": "dist/js",
        "images": "dist/img",
        "fonts": "dist/fonts",
        "sass": "src/assets/styles/"
    },
}
Gulpfile Tasks Definations - gulpfile.js

Edit file to update any gulp tasks to suit your needs

/* file: gulpfile.js */

// include gulp
const { watch, series, parallel, src, dest } = require('gulp');

// include server plugins
var browserSync = require('browser-sync').create();

// include preprocessing plugins
var sass = require('gulp-sass'),
    concat = require('gulp-concat');
    // rename = require('gulp-rename'),
    // uglify = require('gulp-uglify');

// include templating plugins
var nunjucksRender = require('gulp-nunjucks-render'),
    data = require('gulp-data');

// fetching configurations
var fs = require('fs');
var fetchConfig = fs.readFileSync("gfconfig.json", "utf8")
const config = JSON.parse(fetchConfig);

// create a start task and log a message
function init(cb) {
    console.log("Initiating Gulp!");
    cb();
}

// compiling sass files
function sassCompile() {
    console.log("Compiling SASS Files!");
    return src(config.sass)
		.pipe(sass())
		.pipe(dest(config.dest.sass));
}

// compiling css files
function cssCompile() {
    console.log("Compiling CSS Files!");
    return src(config.styles)
		.pipe(concat('application.css'))
		.pipe(dest(config.dest.styles));
}

// compiling js files
function jsCompile() {
    console.log("Compiling JS Files!");
    return src(config.scripts)
		.pipe(concat('application.js'))
		.pipe(dest(config.dest.scripts));
}

// compiling nunjuck template files
function htmlCompile() {
    console.log("Compiling HTML Template Files!");
    return src(config.nunjucks)
        .pipe(data(function() {
            return require(config.data)
        }))
        .pipe(nunjucksRender({
            path: [config.nunjuck_templates]
        }))
		.pipe(dest(config.dest.html));
}

// optimize css and js files
function optimization(cb) {
    console.log("Optimizing APP Files!");
    cb();
}

// creating a server
function initServer() {
    console.log("Starting Browser Sync!");
    browserSync.init({
        server: config.dest.html
    });
}

// updating server files
function reloadServer(cb) {
    browserSync.reload();
    cb();
}

// compile source files
function compileSrc(cb) {
    series(sassCompile, cssCompile, jsCompile, htmlCompile);
    cb();
};

// recompile source files
function recompileSrc() {
    // watch for website content updates
    watch(`${config.dest.html}/*.html`, reloadServer)
    watch(`${config.dest.html}/*.css`, reloadServer)
    watch(`${config.dest.html}/*.js`, reloadServer)

    // watch for image asset updates
    watch(`${config.dest.images}/*.jpg`, reloadServer);
    watch(`${config.dest.images}/*.jpeg`, reloadServer);
    watch(`${config.dest.images}/*.png`, reloadServer);
    watch(`${config.dest.images}/*.gif`, reloadServer);
    watch(`${config.dest.images}/*.svg`, reloadServer);

    // watch for website raw content updates
    watch(config.sass, series(sassCompile, reloadServer));
    watch(config.styles, series(cssCompile, reloadServer));
    watch(config.scripts, series(jsCompile, reloadServer));
    watch(config.nunjucks, series(htmlCompile, reloadServer));
    watch(`${config.nunjuck_templates}/**/*.htm`, series(htmlCompile, reloadServer));
}

// ===========================
// gulp serve (for development)
exports.serve = series(init, compileSrc, optimization, parallel(initServer, recompileSrc))

// gulp build (for production)
exports.build = series(init, series(sassCompile, cssCompile, jsCompile, htmlCompile), optimization)

exports.default = series(init, series(sassCompile, cssCompile, jsCompile, htmlCompile), optimization)

Coming Soon

  • Documentation to the startkit, and help you customise development environment to suit your needs.
  • More features and tasks to power up development environment.