Starter using Gulp 4 and Babel 6. React 0.14 is prepacked as a dev dependency.
-
Clone or download the project and from the root folder run:
$ npm installor$ sudo npm installif the first command fails -
When it's done installing all dependencies, from the same root folder run:
$ npm run gulp serveor$ npm run gulp serve -- --prodfor production
And that should be it.
Important: This Starter uses Gulp 4. If you try $ gulp serve or gulp serve --prod on your terminal it won't work unless you have Gulp 4 installed globally on your machine. The command above runs the local version of Gulp installed with $ npm install.
To list all available tasks, use gulp --tasks-simple.
To see a tree of all tasks and its dependencies, run gulp --tasks
The serve task is the only task that's currently being exposed to the user and this task can be modified for production passing the --prod flag when running Gulp.
-
gulpfile.src
- You shouldn't need to touch this file
- will write proper documentation for this later...
-
gulp-user-config-sample.js
- If you like the default user configs, you can ignore this file/step
- will write proper documentation for this later...
-
base.src
- You'll notice that there's no
indexfile base.srcwill be compiled into index.[extension]- Set name and extension for the
indexfile insidegulp-project-config.js
- You'll notice that there's no
-
SCRIPTS ES6/ES2015 to ES5 using Babel6 with sourcemaps, preconfigured to use React, encorages the use of ES6 modules, automatically bundles dev dependencies from package.json into a separate file and supports custom Modernizr.
-
STYLES Compiles SCSS to CSS with sourcemaps.
- development: -- watch all files
- production with the
--prodflag: -- autoprefix, minify, strip comments, combines MQ's and cache bust
-
FONTS Copy fonts to
distfolder excluding unnecessary files -
IMAGES Copy images to
distfolder- development: -- watch folder for new images
- production with the
--prodflag: -- copy images and tries to reduce their sizes
-
SVG Creates a single SVG sprite out of the SVGs inside
assets/src/svgs/. Injects the sprite into theindexfile, right after the opening<body>tag. The result is a single inline SVG, so no new file or folder is created on thedist/folder. Usage example: for a file calledapple.svgsaved insideassets/src/svgs/, use something like<svg class="svg--apple"><use xlink:href="#apple"></use></svg>.- development: -- watch folder for new or removed SVGs
- production with the
--prodflag: -- creates the sprite and injects it into the index file
You don't need and probably shouldn't install Gulp 4 (or any other Gulp version) globally, but here's how it can be done, for reference:
$ npm uninstall -g gulp to uninstall your current Gulp version
$ npm install -g gulpjs/gulp.git#4.0 to install Gulp 4 CLI globally
note: you probably need to sudo any command that's using the -g flag.
- Account for a
viewsfolder; - Image sprites...
- What else?