README
gulp
Commonly used Gulp tasks to get you off the ground faster
What does it do?
@simpleweb/gulp
abstracts some of the most commonly used tasks we use across
projects, like compiling Sass and ES6. It's aim is to take away the menial
things you have to do each time to get these working.
It does this by giving you a set of tasks, these simply return Gulp streams. There's no magic going on below the surface.
Quick start
- Styles - Compiles Sass to CSS for you, it'll also apply Autoprefixer and include any Bower dependencies.
- Sass - Simply compiles Sass to CSS.
- Scripts - Compiles ES6 to ES5 compliant JavaScript and can include any Bower dependencies.
- ES6 - Simply compiles ES6 to ES5 compliant JavaScript.
Super quick start ⚡
If you're looking to get off the ground even faster and happy with some default behaviours being set, this is for you.
Just specify the directory of your sources files and your destinations and
you'll get access to the following gulp
tasks.
scripts
- Compiles ES6 to ES5 and loads in Bower dependencies.styles
- Compiles Sass to CSS, runs Autoprefixer and loads in Bower dependencies.watch
- Automatically watches the directories of the source files in the config. e.g. ifscripts/main.js
is the source file,scripts/**/*.js
will be watched.
When running any of these tasks, a
--production
flag can be used to minify the compiled CSS/JavaScript.
var gulp = require('gulp');
require('@simpleweb/gulp').auto(gulp, {
styles: {
src: './styles.scss',
dest: './dist'
},
scripts: {
src: './main.js',
dest: './dist'
},
});
Installation
Install the module from NPM by running the following.
$ npm install @simpleweb/gulp --save-dev
Then require it in your gulpfile.js
.
var tasks = require('@simpleweb/gulp').tasks;
Tasks
Styles
Compiles Sass, can concatenate Bower dependencies and can pass everything through Autoprefixer.
Example
gulp.task('styles', function() {
return tasks.styles({
src: './styles/styles.scss',
bower: true,
autoprefixer: true
})
.pipe(gulp.dest('./tmp'))
;
});
Parameters
argument | type | default | description |
---|---|---|---|
src |
String |
Path to the main Sass file | |
bower |
Boolean |
false |
Whether to load in Bower dependencies. If true , bower.json must exist along with it's components folder |
autoprefixer |
Object /Boolean |
false |
You can use all autoprefixer options or pass true to run with default options |
Flags
A production
flag can be passed to minify the CSS for production.
$ gulp styles --production
Sass
Compiles Sass into CSS using gulp-sass
.
Example
gulp.task('sass', function() {
return tasks.sass('./main.scss')
.pipe(gulp.dest('./css'));
});
Parameters
argument | type | default | description |
---|---|---|---|
src |
String |
Path to the main Sass file | |
options |
Object |
{} |
You can use all the node-sass options |
ES6
Compiles ES6 into JavaScript that's ES5 compliant. ES3 transforms are applied to it as well, so it will work with IE8. However, you will still need to use the shim and sham with it.
Example
gulp.task('es6', function() {
return tasks.es6('./main.js')
.pipe(gulp.dest('./js'))
;
});
Parameters
argument | type | default | description |
---|---|---|---|
src |
String |
Path to the main ES6 file |
Scripts
Compiles ES6 into JavaScript that's ES5 compliant and can bundle in your Bower dependencies.
Example
gulp.task('scripts', function() {
return tasks.scripts({
src: './main.js',
bower: true
})
.pipe(gulp.dest('./js'))
;
});
Parameters
argument | type | default | description |
---|---|---|---|
src |
String |
Path to the main ES6 file | |
bower |
Boolean |
false |
Whether to load in Bower dependencies. If true , bower.json must exist along with it's components folder |
Flags
A production
flag can be passed to minify the CSS for production.
$ gulp scripts --production
Development
Setup
You can work on this locally without having to continuously publish to NPM.
After cloning the repo down, cd
into the directory and run npm link
. This
will create a symbolic in your global modules folder.
To install it in a project and test out, run npm link @simpleweb/gulp
. You can
then require it like you usually would. This is the equivalent of running
npm install @simpleweb/gulp
except it uses the symbolic link in your global
modules folder.
Adding a task
To create a new task think of a clear and descriptive name and create a file
for it in the tasks
directory.
$ touch tasks/hello-world.js
In the file that was just created, export the main function for that task.
module.exports = function() {
console.log('Hello world');
};
At the top of index.js
, require
the task and give it a clear constant name.
const hello_world = require('./tasks/hello-world');
Finally, add the module to the exports
line.
module.exports = { sass, hello_world };