generator-dawg
v1.0.2
Published
Don't Automate Without Gulp: An opinionated generator that gets you up and running with modern front-end web development tools (Gulp, BrowserSync, ES6, Babel, JSHint, Mocha, Sass)
Downloads
8
Maintainers
Readme
generator-dawg
Don't Automate Without Gulp! generator-dawg is an opinionated Yeoman generator that gets you up and running with modern front-end web development tools. Inspired by generator-modern-frontend.
Features
- Development
- Package management with npm
- Building with Gulp
- Live-reloading with BrowserSync
- Automatically reload the browser when changes to the file system are detected
- Changes in stylesheets inject into the browser without triggering a reload
- Scaffolds out common files like favicon.ico, robots.txt, Readme.md, and more
- JavaScript
- ES6 transpiling with Babel
- Full ES6 module support with Browserify
- Linting with JSHint
- Testing with Mocha
- Documentation generation with ESDoc
- Minification with uglify
- Concatenation with gulp-concat
- ES6 transpiling with Babel
- CSS
- Preprocessing with Sass
- Autoprefixing with PostCSS and Autoprefixer
- Minification with cssnano and uncss
- Concatenation with gulp-concat
- Includes normalize.css for cross-browser normalization
- Images
- Compression with imagemin
- Spriting with spritesmith [Not yet implemented]
For more information on what this generator can do for you, take a look at the gulp plugins used in our package.json
.
Getting Started
- Install Yeoman:
npm install --global yo
- Install this generator:
npm install --global generator-dawg
- Create a directory for your new project:
mkdir my_new_project && cd my_new_project
- Run
yo dawg
to install dependencies and start scaffolding. This will rungulp serve --silent
upon completion, and will fire up your favorite browser at localhost:9000, which points to your shiny new web app.
Now you're ready to go! Open up .
in your favorite text editor and begin hacking.
You can add files to your project as you normally would. Third-party scripts and styles can be placed in src/scripts/vendor
and src/styles/vendor
, and Gulp will automatically concatenate and minify them into your app's main scripts/stylesheet.
Other useful commands (after you've already yo dawg
ed):
- Run
gulp serve --silent
to preview and watch for changes - Run
npm install --save <package>
to install frontend dependencies - Run
gulp
to build for production
Options
--skip-install
Skips the automatic execution ofnpm
after scaffolding has finished.