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).
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.
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 agulp.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
.
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 !
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
.
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)
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.
-
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
andUnna
. - The project use the Material Design Icons :
i.material-icons face
- Use
-
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.
- Use
-
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 thevendors.js
file.
- Remember to call every files in the
-
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.
- If you add new folders, remember to call them into the