Skip to content

sarcadass/gulpit

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

Gulpit is an easy and fast configurable task library built around Gulp useable with a CLI.

Resources

License

Stars

Watchers

Forks

Packages

No packages published