Nephos
Back to Hub
Back to Css Ninja

Appearance

Working with Gulp ​

In this section, we are briefly going to see how to use gulp and the Nephos gulpfile.js.

Available modules ​

Nephos takes advantage of several gulp modules. We are going to see what each one does to give you a better understanding of what is happening. Let's see the modules used by our gulpfile :

js
const {src, dest, watch, series, parallel } = require('gulp');
const log = require('fancy-log');
const colors = require('ansi-colors');
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass');
const bourbon = require('node-bourbon').includePaths;
const rename = require('gulp-rename');
const concat = require('gulp-concat');
const del = require('del');
const panini = require('panini');
const uglify = require('gulp-uglify-es').default;
const sourcemaps = require('gulp-sourcemaps');
const imagemin = require('gulp-imagemin');
const removeCode = require('gulp-remove-code');
const removeLog = require('gulp-remove-logging');
const prettyHtml = require('gulp-pretty-html');
const sassLint = require('gulp-sass-lint');
const htmllint = require('gulp-htmllint');
const jshint = require('gulp-jshint');
const htmlreplace = require('gulp-html-replace');
const newer = require('gulp-newer');
const autoprefixer = require('gulp-autoprefixer');
const accessibility = require('gulp-accessibility');
const babel = require('gulp-babel');
const nodepath = 'node_modules/';
const assetspath = 'assets/';

Gulp Plugins: ​

Additional variables ​

There are two additional variables that we define at the top of the file. We will need them to continue :

  • assetspath : a shortcut to get stuff from the /assets folder, so we don't expose our internal paths.
  • nodepath : a shortcut to get stuff from the /node-modules folder (created by pnpm), so we don't expose our internal paths.

Gulp tasks ​

We prepared a certain number of predefined tasks that will help you during all the development process. We will go through the gulpfile.js file to detail each one of this tasks.

Server task ​

js
function browserSyncInit(done) {
  browserSync.init({
    server: './dist'
  });
  return done();
}

Gulp uses this task to create a browser-sync instance. It creates a local development server and automatically opens a browser window showing index.html.

Watch task ​

js
function watchFiles() {
  watch('src/**/*.html', compileHTML);
  watch(['src/assets/scss/**/*', 'src/assets/scss/*'] , compileSCSS);
  watch('src/assets/js/*.js', compileJS);
  watch('src/assets/img/**/*', copyImages);
}

Gulp uses this task to watch any change you make to the HTML and Sass files. When it detects changes, it triggers other tasks that handle Sass and HTML compilation.

Clean task ​

js
function cleanDist(done) {
  del.sync('dist');
  return done();
}

Gulp uses this task to clean the dist folder, which the result of the project build. At the moment you should not see any dist folder because you didn't build the project yet. This task is also used at the beginning of the build process, to clean the folder before compiling the assets again.

Bulma task ​

js
function setupBulma() {
  return src([nodepath + 'bulma/*.sass', nodepath + 'bulma/**/*.sass'])
    .pipe(dest('src/assets/sass/'));
}

gulp uses this task to copy the Bulma source file from their location in the _node-modules folder to the sass/ folder. As these assets are already copied in the project, you shouldn't need this task right now.

Plugins task ​

js
function concatPlugins() {
  return src([
    nodepath + 'jquery/dist/jquery.min.js',
    nodepath + 'feather-icons/dist/feather.min.js',
    nodepath + 'typed.js/lib/typed.min.js',
    nodepath + 'easy-autocomplete/dist/jquery.easy-autocomplete.min.js',
    nodepath + 'alertifyjs/build/alertify.min.js',
    nodepath + 'scrollreveal/dist/scrollreveal.min.js',
    nodepath + 'ocanvas/build/dist/latest/ocanvas.min.js',
    nodepath + 'slick-carousel/slick/slick.min.js',
    nodepath + 'croppie/croppie.min.js',
    nodepath + '@fengyuanchen/datepicker/dist/datepicker.min.js',
    nodepath + 'chosen-js/chosen.jquery.min.js',
    nodepath + 'izitoast/dist/js/iziToast.min.js',
    nodepath + 'webui-popover/dist/jquery.webui-popover.min.js',
    nodepath + 'zoom-vanilla.js/dist/zoom-vanilla.min.js',
    nodepath + 'scrollreveal/dist/scrollreveal.min.js',
    nodepath + 'card/dist/jquery.card.js',
    'src/assets/vendor/js/*',
  ])
    .pipe(sourcemaps.init())
    .pipe(concat('app.js'))
    .pipe(sourcemaps.write('./'))
    .pipe(dest('dist/assets/js'))
    .pipe(browserSync.stream());
}

Gulp uses this task to concatenate all the required plugins into a single file which gets pushed to dist/assets/js/ folder. You can then access those plugins from there in your web pages.

Assets tasks ​

js
function copyImages() {
  return src('src/assets/img/**/*.+(png|jpg|jpeg|gif|svg)')
    .pipe(newer('dist/assets/img/'))
    .pipe(imagemin())
    .pipe(dest('dist/assets/img/'))
    .pipe(browserSync.stream());
}

function copyFont() {
  return src([
      'src/assets/font/*',
    ])
    .pipe(dest('dist/assets/fonts'))
    .pipe(browserSync.stream());
}

function copyData() {
  return src([
    'src/data/**/*',
  ])
    .pipe(dest('dist/assets/data'))
    .pipe(browserSync.stream());
}

function jsVendor() {
  return src([
      'src/assets/vendor/js/*',
    ])
    .pipe(dest('dist/assets/vendor/js'))
    .pipe(browserSync.stream());
}

function cssVendor() {
  return src([
      'src/assets/vendor/css/*',

    ])
    .pipe(dest('dist/assets/vendor/css'))
    .pipe(browserSync.stream());
}

gulp uses those tasks to copy all external assets and dependencies into the corresponding sub-folder of the dist/assets/ folder of the production site.

Compile Sass task ​

js
function compileSASS() {
  return src(['src/assets/sass/bulma.sass'])
    .pipe(sass({
      outputStyle: 'compressed',
      sourceComments: 'map',
      sourceMap: 'sass',
      includePaths: bourbon
    }).on('error', sass.logError))
    .pipe(autoprefixer('last 2 versions'))
    .pipe(dest('dist/assets/css'))
    .pipe(browserSync.stream());
}

Gulp uses this task to compile the Bulma source files into a single CSS file. it then copies this file in dist/assets/css/.

Compile SCSS task ​

js
function compileSCSS() {
  return src(['src/assets/scss/main.scss', 'src/assets/scss/demo.scss'])
    .pipe(sass({
      outputStyle: 'compressed',
      sourceComments: 'map',
      sourceMap: 'scss',
      includePaths: bourbon
    }).on('error', sass.logError))
    .pipe(autoprefixer('last 2 versions'))
    .pipe(dest('dist/assets/css'))
    .pipe(browserSync.stream());
}

Gulp uses this task to compile the Nephos SCSS source files into a single CSS file (main.css). it then copies this file in dist/assets/css/.

Compile HTML task ​

js
function compileHTML() {
  panini.refresh();
  return src('src/pages/**/*.html')
    .pipe(panini({
      root: 'src/pages/',
      layouts: 'src/layouts/',
          /*pageLayouts: {
            //All pages inside src/pages/blog will use the blog.html layout
            'blog': 'blog'
          }*/
      partials: 'src/partials/',
      helpers: 'src/helpers/',
      data: 'src/data/'
    }))
    .pipe(dest('dist'))
    .pipe(browserSync.stream());
}

Gulp uses this task to compile all the changes you make to the template HTML files. It triggers a refresh from Panini to update your templates before rendering.

Compile JS task ​

js
function compileJS() {
  return src([
      'src/assets/js/_data-wishlist.js',
      'src/assets/js/_data-addresses.js',
      'src/assets/js/_data-orders.js',
      'src/assets/js/functions.js',
      'src/assets/js/nephos.js',
      'src/assets/js/authentication.js',
      'src/assets/js/cart.js',
      'src/assets/js/account.js',
      'src/assets/js/wishlist.js',
      'src/assets/js/product.js',
      'src/assets/js/orders.js',
      'src/assets/js/order.js',
      'src/assets/js/checkout.js',
      'src/assets/js/search.js',
      'src/assets/js/demo.js',
      'src/assets/js/elements.js',
    ])
    .pipe(babel())
    .pipe(dest('dist/assets/js/'))
    .pipe(browserSync.stream());
}

Gulp uses this task to copy all your custom javascript to the distribution folder.

Gulp commands ​

We've seen that we have a lot of ready to use tasks for gulp. While you can run some of the above tasks individually, let's now see the available commands that make use of multiple tasks at once.

gulp dev ​

Builds the project and runs a dev server. It runs several tasks that we defined above. Run it by typing this command in your terminal window, at the root of the project :

gulp dev

Here is what happens when you run gulp dev :

  • Gulp deletes the dist folder
  • Then, gulp executes all assets copying and compilation tasks :
js
series(cleanDist, copyFont, copyData, jsVendor, cssVendor, copyImages, compileHTML, concatPlugins, concatCssPlugins, compileJS, resetPages, prettyHTML, compileSASS, compileSCSS, browserSyncInit, watchFiles);

Setup Nephos ​

You should now have a basic understanding of what Gulp and Panini are doing. You are now ready to setup the project to start developing. We've been talking about gulp and panini for ages but you'll quickly see how fast it is to setup your project. In your terminal window, change directory to the root of the nephos-2.2 folder :

cd path/to/nephos/

Then start by building the project. Run the following command. It will also launch a development server in your browser window :

gulp dev

When the task starts, you should be redirected to your browser showing the index.html page. That's it, your project is now running. Every change you make to the HTML or SCSS files will trigger a code compilation and a browser refresh. Really easy isn't it ?

Nephos plugins ​

Nephos is bundled with some javascript plugins to enhance the template features. If you want more details about plugin usage and initialization, please head to the JS reference section. Here is a list of the plugins used by Nephos.

  • Card.js

A plugin that enhances the user checkout experience by mocking a credit card. Read the plugin documentation for more details about usage.

  • Chosen.js

A plugin that transforms HTML native selects into beautiful javascript powered components. Read the plugin documentation for more details about usage.

  • feather.js

A plugin that implements a full features svg icon library and gives you great control over them. Read the plugin documentation for more details about usage.

  • iziToast.js

A plugin that implements a very flexible set of toast notifications. Read the plugin documentation for more details about usage.

  • slick.js

An already world famous carousel plugin. Read the plugin documentation for more details about usage.

  • webuipopover.js

A plugin that offers fully customizable popovers. Read the plugin documentation for more details about usage.

  • zoom.js

A simple jQuery plugin for image zooming, as seen on Medium. Read the plugin documentation for more details about usage.

  • datepicker.js

A simple jQuery datepicker plugin, with basic options. Read the plugin documentation for more details about usage.

  • easy-autocomplete

A powerful autocomplete plugin with many features. Read the plugin documentation for more details about usage.

All Rights Reserved

Copyright © 2024 Css Ninja.