Gulpit is an easy and fast configurable task library built around Gulp useable with a CLI. You just have to configure the 'gulpit-conf.js' file (< 2min). You will find a sample below.
- Install the package with NPM:
npm install --global gulpit
- Create a 'gulpit-conf.js' file in the root of your project
cd
where the 'gulpit-conf.js' is then run:gulpit
You have two main command when you are in the gulpit app:
Build
: will build your files oncewatch
: will watch for file modifications then build after each new savehelp
: List the command available with descriptions
You have extra options like:
build --css
: will only build cssbuild --prod
: will build with the prod profile*
You can combine:
build --js --prod
: will only build js with the prod profile*
*Prod profile: will override the default options.
For Javascript:
- Browserify
- Uglify (you can use both Browserify and Uglify)
- Sourcemaps
For CSS:
- Sass
- Less
- Sourcemaps
- Autoprefixer
Here is an example of a specific config if you use browserify (with sourcemaps) and sass (with sourcemaps and autoprefixer):
module.exports = {
projectName: 'test-project',
profiles: {
default: {
js: {
sourceFolder: 'dev/js/browserify/index.js',
exitFolder: 'build/js/',
exitFileName: 'app.js',
tasks: {
browserify: { activate: true },
sourcemaps: { activate: true }
}
},
css: {
sourceFolder: 'dev/css/sass/index.scss',
exitFolder: 'build/css/',
exitFileName: 'style.css',
tasks: {
sass: {
activate: true,
options: {
outputStyle: 'nested'
}
},
autoprefixer: {
activate: true,
options: {
browsers: ['last 2 versions']
}
},
sourcemaps: { activate: true }
}
}
},
// Optional prod profile to disable sourcemaps
// when you use '--prod' argument in the CLI
prod: {
js: { sourcemaps: { activate: false } },
css: { sourcemaps: { activate: false } }
}
}
};
You can find the complete sample conf with all the tasks available in the test folder of this repo.
-
The different options for sass.options.outputStyle are: nested, expanded, compact, compressed
-
If you use both Browserify and Uglify, the uglify.options.concat options will be ignored as browserify already concat all the files
-
File will be renamed after build only if you indicate a specific file for sourceFolder
-
You can the use prod profile by setting your NODE_ENV to "prod" instead of using the
--prod
option.