Skip to content

Latest commit

 

History

History
112 lines (82 loc) · 2.76 KB

README.md

File metadata and controls

112 lines (82 loc) · 2.76 KB

Gulpit

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.

How do I get set up?

  • 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

How do I use the CLI?

You have two main command when you are in the gulpit app:

  • Build: will build your files once
  • watch: will watch for file modifications then build after each new save
  • help: List the command available with descriptions

You have extra options like:

  • build --css: will only build css
  • build --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.

Which tools can I use?

For Javascript:

  • Browserify
  • Uglify (you can use both Browserify and Uglify)
  • Sourcemaps

For CSS:

  • Sass
  • Less
  • Sourcemaps
  • Autoprefixer

Sample 'gulpit-conf.js'

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.

Extra info

  • 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.

alt text