victorallegret/gulpdup

GulpDup 🌵 is a blank template for making statics webapps using Gulp.js with Sass, Slim, CoffeeScript & BrowserSync.

GulpDup

GulpDup is a blank template for making statics webapps propulsed by Gulp.js.
It work with Sass, Slim-template and CoffeeScript.
The project use BrowserSync to run a multi-device auto-reload server.
It come with a bunch of libraries, required with Browserify : Bootstrap v4, Jquery, Slick-carousel, Waypoints and Turbolinks.
GulpDup project structure is based on the Atomic Design Methodology (Atoms | Molecules | Organisms).

Install

WARNING You must have node.js installed to run GulpDup.

First, you’ll have to fork or clone the GulpDup repository

You will have to install :

$ npm install gulp -g

Then in your Terminal :

$ npm install

That’s it ! You now can use all the features of GulpDup.

Commands

You can run independently every commands of the gulpfile.js. But the 3 commands you need are the following:

• Create your development environment :

  $ gulp
  

  This command will run every command you need to launch a local server and compile all your assets / templates.
  This command will also start a gulp.watch task. The server will watch every .sass, .slim and .coffee files. If you update one of these files, the server will reload.

• Create your production environment:

  $ gulp build
  

  This command will create a build folder with all the assets / template optimized and ready to deploy.

• Clean the production environment:

  $ gulp clean
  

  This command will destroy the build folder, previously created with $ gulp or $ gulp build.

Plugins

GulpDup use a bunch of npm plugins:

• browserSync : Run a multi-device auto-reload local server.
• browserify : Enable require modules in the browser.
• gulp-sass : Compile sass files into CSS.
• gulp-sass-glob : Add global import for sass files.
• gulp-uncss : Remove unused css properties.
• gulp-slim : Compile slim template files into HTML
• gulp-coffee : Compile coffeeScript files into Javascripts.
• gulp-contact : Concat files.
• gulp-uglify : Minification for js files.
• gulp-sourcemaps : Add sourcemaps for sass files.
• gulp-sequence : Run tasks in order.
• gulp-filter : Add filter for gulp tasks.
• gulp-imagemin : Optimize images.
• gulp-rename : Auto rename files (.css to .min.css etc ..).
• gulp-rimraf : Delete files / folders.
• gulp-notify : Add notifications when running tasks.
• gulp-wrap : Wrap every template files into one layout file.

INFOS Feel free to add some in the gulpfile !

Vendors

GulpDup use a bunch of vendors:

• Turbolinks : Make navigation application faster.
• Bootstrap v4 : Css framework.
• Jquery : Javascript library.
• Waypoints : Javascript library to trigger events on scroll.
• Slick-carousel : A library to create sliders.

INFOS You can use require to call new vendors in the ./dev/assets/javascripts/vendors.js.

Project structure

INFOS You can update the default structure project, but you may need to update the gulfile.js too.

The project is based on the Atomic Design Methodology.

The development structure is divided into 2 folders :

• assets : Stylesheets (sass / css vendors) | Javascripts (coffeeScript / js vendors) | Fonts | Images.
• views : Slim templates of the project (HTML)

Views structure

There is 2 types of slim files:

• basic files : index.slim, contact.slim etc ...
• partials files : _index.slim, _contact.slim etc ...

WARNING All the partials must be call with an underscore. ex: _layout.slim

Basics files you should need are the ./dev/views/layout/ files & partials : application.slim, _footer.slim _header.slim.

INFOS Every files are injected into the application.slim file, but you will have to include the footer partial into each file cause of a WIP issue of gulp-wrap.

Assets structure

• fonts

  • Use .eot, .svg, .ttf, .woff, .woff2 extensions.
  • Put all fonts you need in this folder.
  • If you add a new font, $ gulp fonts and refresh the page.
  • You can create folders to organize your fonts.
  • Defaults text fonts are : brandon, gotham and Unna.
  • The project use the Material Design Icons : i.material-icons face

• images

  • Use .png, .jpg, .jpeg, .gif, .svg, .ico extensions.
  • Put all images you need in this folder.
  • If you add a new image, $ gulp img and refresh the page.
  • You can create folders to organize your images.

• javascript

  • Remember to call every files in the main.coffee file.
  • Use classes.
  • Feel free to update the default javascripts folders.
  • Call with require the vendors you need in the vendors.js file.

• stylesheets

  • If you add new folders, remember to call them into the main.sass file.
  • The project use bootstrap, so there is some basic styles.
  • The project come with a bunch of variables | mixins | helpers, free to update !
  • I recommand to design every components of the project into the ./dev/assets/stylesheets/components/ folder.