Below you will find pages that utilize the taxonomy term “Gulp”

Post

Handlebars Templates with Browserify

This post documents how to use the hbsfy precompiler plugin for Browserify to compile Handlebars templates into javascript. With this design, templates can be required as javascript modules in the views that use them. Requirements Node.js which includes NPM. Browserify Gulp Command shell such as terminal, Cygwin or Bash on Ubuntu on Windows. Code Editor. Global Packages List the global packages that are installed with the npm list –global command.
Post

Google Maps API with Browserify

This post documents how to use local JavaScript modules with Browserify and the Google Maps JavaScript API. In this example, the Google Map contains a marker that can be dragged to reset the browser form with the marker position location data. Additionally, Browserify shim is used to require jQuery since it is already being loaded from a CDN. Requirements Node.js which includes NPM. Browserify Gulp Command shell such as terminal, Cygwin or Windows Command prompt.
Post

Sass Workflow Using cssnano and Autoprefixer

This Sass preprocessor workflow uses cssnano for postprocessing minification and optimization that includes Autoprefixer to add vendor prefixes for only the browsers that need to be supported. UPDATE: Webpack 3 version (11-12-2017) Autoprefixer Without Autoprefixer, adding in vender prefixes is done in the Sass code, typically with a mixin to append every known prefix for a property. This more advanced mixin to prefix properties at least accepts prefix parameters for more control over which ones to use.
Post

Google Maps API RequireJS Module

This post documents how to create a RequireJS module that loads the Google Maps JavaScript API and is used by a web page to populate form inputs with location data. The Google Map contains a marker that can be dragged to reset the form with the marker position location data. Source Code Development Environment In order to use the package managers, Gulp task runner, BrowserSync and RequireJS optimizer, you will need to have the following installed.
Post

BrowserSync SSI Recipe

BrowserSync is my Node.js web browser app development server of choice. This gulpfile is a work in progress to address support for server side includes when using a BrowserSync static server. gulpfile.js var gulp = require('gulp'); var browserSync = require('browser-sync').create(); var minimist = require('minimist'); var serverConfig = { site: './src', directory: false, host: 'localhost', ssi: '.inc', index: 'index.html' } // from https://github.com/gulpjs/gulp/blob/master/docs/recipes/pass-arguments-from-cli.md // seems to make sense since gulp itself uses minimist.
Post

Browserify with Sourcemaps

Browserify lets you write modular JavaScript in node.js style. At the beginning of each module you write, the respective dependencies are added using require statements. Then Browserify compiles the modules along with all of the dependencies into an optimized JavaScript file for use in the browser. If jQuery has already been loaded by a CDN or otherwise, a Browserify Shim can be used to include global jQuery as a module.
Html

HTML 5 Template

Template with html5.js shiv * <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Super Site!</title> <meta name="description" content="My Super Site!"> <meta name="author" content="My Name"> <link rel="stylesheet" href="css/styles.css"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> </body> </html> * Inspired by HTML5 Boilerplate Emmet If the Emmet plugin is installed in your code editor, you can use the ! alias or html:5 abbreviation then tab to stub out the template.