Blank new web project using Gulp
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dev
.babelrc
.gitattributes
.gitignore
.htaccess
.jshintrc
.stylelintrc.json
LICENSE
README.md
gulpfile.js
package-lock.json
package.json
yarn.lock

README.md

New projects with Gulp v1.4

Set up

  1. Clone files to a new directory
  2. cd to the this directory via command line/terminal
  3. Run yarn install to get your node_modules (default .gitignore)
  4. Check package.json and make changes in general info, paths, vars and url where needed
  5. Run gulp commands to start developing

Gulp commands

  • To run an active watch with BrowserSync, run gulp
  • To only run the Critical path for dist: gulp critical
  • To only run the JS vendor files: gulp vendors
  • To only run the JS custom files: gulp js
  • To only run the SASS files: gulp css
  • To only run the Pug files: gulp pug
  • To only run the image files: gulp images
  • To only run the font files: gulp fonts
  • To only run the font files: gulp favicons

Organisation

  • Dev: Add any and all development content here. Pug for html templates
    • Views:: All files and folders are copied from this location, from Pug to HTML format, excluding files from the _layout folder
    • CSS/modules: Contains all modular files -> main.scss
    • CSS/pages: Contains all files for custom/specific pages -> main.scss
    • CSS/template: Contains all basic template files -> main.scss
    • images: Contains all images. Using subfolder is allowed. Optimization will happen later
    • JS/vendor: Contains all vendor files -> vendor.js
    • JS/main: Contains all custom files -> main.js
  • Build: All dev changes are tracked in the build folder. These files are compiled for web friendly viewing. This is the working test directory when running a local server.
  • Dist: All build files are compiled for final host purposes in the dist folder. These files (css, js, html & images) are optimized for the web (minified & concatenated). Paths are changed where needed to fit the need of the server. Before upload this folder is emptied and after upload this folder is deleted.

Don't forgets..

  • Replace the Google key in your package.json file when going live
  • Leave the $path var to it's default value if your site exists in the root

To publish via FTP

  • Before deploying, you need to have run a general build so you have a build folder that's up to date, then run the gulp critical, before finally running the gulp ftp command.
  • Open/create .ftppass (root dir) and edit/add any server with the specific name: ServerA (= the default server name). But don't forget that this file needs to be in the same location as your Gulpfile.js. You can choose a different name by changing it in the Gulpfile.js. Make sure it remains in the .ignore for privacy reasons.
  • Run gulp ftp (make sure to test and backup remote files if needed first)
  • The command overwrites any excisting files, creates non-existing ones and it doesn't delete others.
  • When creating your own .ftppass file, you could use this code to set it up:
{
  "ServerA": {
    "username": "putyourownusernamehere",
    "password": "putyourpasswordhere"
  },
  "anotherServerifYouNeedItButItsOptional": {
    "username": "putyourownusernamehere",
    "password": "putyourpasswordhere"
  }
}

To publish via Netlify

  • Setup the website on Netlify and verify all details.
  • Simply push to master branch to trigger the gulp command gulp publish and let Netlify do all the rest

For more information

Requirements/used

  • jQuery
  • SASS for css
  • Pug for html
  • Gulp
  • Yarn

Browser compatibility

  • Internet Explorer 11+ & Edge
  • Firefox (latest version)
  • Chrome (latest version)
  • Opera (latest version)
  • Safari (latest version)

Version 1.1

  • Added vendor concat & minify in Gulp build

Version 1.2

  • Added Gulp ftp and replaced jade with pug

Version 1.3

  • Moved a lot of info to the package file (cleaning up the Gulpfile)
  • Added critical gulp module for above the fold content
  • Added Google code via package file (1.3.2)

Version 1.4

  • Added new CSS structure
  • Added stylelinter
  • Load in CSS with preload attribute
  • Preconnect font if from Google Webfonts (1.4.2)

Version 1.x

  • Assets versioning on selected js files