Working with Gulp

Gulp is a "Task runner" served as a Frontend tool. It is capable of executing chunks of code and save you huge amounts of time. What gulp can do is very vast :

• Simple operations like CSS and Javascript minification / concatenation
• Directory creation or deletion, project creation from scratch
• Image optimization and compression
• Deploying a local server to run tests
• Ghost browser simulation to test display regressions etc ...

To stay simple, Gulp will help you save tremendous amounts of time by handling recurring and automated tasks. You can then focus on your real work : produce clear and concise code, and get a coffee from time to time ! If you want to install Gulp globally on your machine, meaning that you will have access to its commands everywhere, follow the following steps. Otherwise jump to the next section.

To work properly, it relies on 2 files that you can find at the root of the project :

• package.json
• gulpfile.js

The package.json file lists all your project's development and production dependencies installed via pnpm, an effective way to manage your project's assets consistently. The gulpfile.js file contains all the task that Gulp will perform once launched.

Available modules

Friendkit 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 :

• gulp-autoprefixer
• gulp-compile-handlebars
• gulp-concat
• gulp-html-replace
• gulp-htmllint
• gulp-imagemin
• gulp-pretty-html
• gulp-remove-code
• gulp-remove-logging
• gulp-rename
• gulp-sass
• node-bourbon
• gulp-sass-lint
• gulp-sourcemaps
• gulp-uglify
• gulp-newer
• gulp-accessibility
• gulp-jshint
• gulp-gulp-gh-pages
• gulp-babel
• panini
• run-sequence
• ansi-colors
• fancy-log

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 npm), 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

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

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

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

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

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

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 SCSS task

function compileSCSS() {
  return src(['src/assets/scss/core.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 Friendkit SCSS source files into a single CSS file (main.css). it then copies this file in dist/assets/css/.

Compile HTML task

function compileHTML() {
  panini.refresh();
  return src('src/pages/**/*.html')
    .pipe(panini({
      root: 'src/pages/',
      layouts: 'src/layouts/',
      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

function compileJS() {
  return src([
    'src/assets/js/components/compose.js',
    'src/assets/js/components/autocompletes.js',
    'src/assets/js/components/webcam.js',
    'src/assets/js/components/widgets.js',
    'src/assets/js/components/elements.js',
    'src/assets/js/components/modal-uploader.js',
    'src/assets/js/components/lightbox.js',
    'src/assets/js/components/popovers-pages.js',
    'src/assets/js/components/popovers-users.js',
    'src/assets/js/navigation/navbar-v1.js',
    'src/assets/js/navigation/navbar-v2.js',
    'src/assets/js/navigation/navbar-mobile.js',
    'src/assets/js/navigation/navbar-options.js',
    'src/assets/js/navigation/sidebar-v1.js',
    'src/assets/js/global.js',
    'src/assets/js/main.js',
    'src/assets/js/touch.js',
    'src/assets/js/tour.js',
    'src/assets/js/pages/chat.js',
    'src/assets/js/pages/events.js',
    'src/assets/js/pages/explorer.js',
    'src/assets/js/pages/feed.js',
    'src/assets/js/pages/stories.js',
    'src/assets/js/pages/friends.js',
    'src/assets/js/pages/inbox.js',
    'src/assets/js/pages/landing.js',
    'src/assets/js/pages/news.js',
    'src/assets/js/pages/profile.js',
    'src/assets/js/pages/questions.js',
    'src/assets/js/pages/shop.js',
    'src/assets/js/pages/signup.js',
    'src/assets/js/pages/settings.js',
    'src/assets/js/pages/videos.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.

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 :

pnpm dev

Here is what happens when you run pnpm build :

• Gulp deletes the dist folder
• Then, gulp executes all assets copying and compilation tasks

gulp build

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

pnpm build

Here is what happens when you run pnpm build :

• Gulp generate the dist folder with production tasks

Setup Friendkit

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 project :

cd path/to/friendkit/

get the project dependencies :

pnpm install

Finally start the gulp watcher. Run the following command. It will build the dist folder with all relevant assets inside it :

pnpm dev

When the task starts, you should be redirected to your browser showing the index.html page. That is 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 ?

Friendkit Plugins

As stated before, Friendkit is based on a CSS only framework, Bulma.io. CSS only means there is no javascript shipped with it, unlike Bootstrap. Friendkit has its own javascript implementation of Bulma components using jQuery. You are free to use the existing implementations or to write your own if you want to. You could also use Friendkit in a Vue project by using only the CSS and inspiring from jQuery to write Vue methods. The choice is up to you.

Plugins

Friendkit ships with many interesting javascript plugins that increase the frontend experience.

• Fancybox3

A premium JavaScript lightbox library for presenting various types of media. Responsive, touch-enabled and customizable. Read the plugin documentation for more details about usage.

• Feather Icons

Simply beautiful open source icons generated with JS as svg and customizable with CSS. Read the plugin documentation for more details about usage.

• Vivid Icons

Vivid.js has 90+ pixel perfect and hand crafted ready to use icons. An icon can easily be used and its size along with colors can be customized with data-vi attributes. Read the plugin documentation for more details about usage.

• slick carousel

A powerful and highly customizable carousel with a very rich documentation. Read more about it here.

• Emojione Area

Emojione-area is a small jQuery plugin that allows you to transform any HTML element into simple WYSIWYG-like editor with ability to use Emojione emojis. Read the plugin documentation for more details about usage.

• Webui Popover

A lightWeight popover plugin with jquery ,enhance the popover plugin of bootstrap with some awesome new features. Read the plugin documentation for more details about usage.

• easyAutocomplete

A jQuery plugin that lets you easily setup an autocomplete input. You can also create custom templates for your autocomplete fields. Read the plugin documentation for more details about usage.

• Dropzone

Dropzone is an open source library that provides drag’n’drop file uploads with image previews. Read the plugin documentation here.

• Datepicker

jQuery Datepicker is a jQuery timepicker plugin. It has basic features and is a good choice if you are looking for a simple datepicker for your website. Read the plugin documentation for more details about usage.

• iziToast

A nice jQuery plugin to display styled toast notifications on your website. It has many configuration options. Read the plugin documentation for more details about usage.

• Quill JS

Quill is a free, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any need. Read the plugin documentation for more details about usage.

• Croppie

Croppie is a fast, easy to use image cropping plugin with tons of configuration options. Documentation can be found here.

• Cropperjs

A powerful javascript image cropper. Documentation can be found here.

• Modal Video

A simple but yet powerful video modal plugin. Read the plugin documentation for more details about usage.

• Plyr

A simple, accessible and customizable media player. Read the plugin documentation for more details about usage.

• Hammerjs

A library used to add touch gestures to web applications. Read the plugin documentation for more details about usage.

• Scrollreveal

A must have plugin if you want elements to animate on when visible on scroll. Read the plugin documentation for more details about usage.

• Hopscotchjs

Hopscotch is a framework to make it easy for developers to add product tours to their pages. Documentation can be found here.

• GGtooltip

A small plugin that helps you to display simple tooltips. Documentation can be found here.details about usage.