Simple build scripts for frontend development based on npm.
- Browsersync : Keep multiple browsers & devices in sync when building websites.
- Imagemin : Minify images: JPEG, PNG, GIF and SVG.
- ESLint : Lint ECMAScript/JavaScript code.
- Sass : Compile Sass stylesheets to CSS.
- Autoprefixer : Add vendor prefixes to CSS rules.
Mini | +Lint | +Styles | Full | |
---|---|---|---|---|
Browsersync | ✓ | ✓ | ✓ | ✓ |
Imagemin | ✓ | ✓ | ✓ | ✓ |
ESLint | - | ✓ | - | ✓ |
Sass & Autoprefixer | - | - | ✓ | ✓ |
Download | Download | Download | Download |
-
Download package.json from above.
-
Create
public
directory and place your web contents in it.your-project/ ├── public/ : Static web contents └── package.json : Download from this repository
-
Install dependencies.
$ npm install
-
Start development.
$ npm start
If you want to code stylesheets in Sass, just create Sass files in public
.
CSS will be generated in the same folder.
public/styles/main.scss
public/styles/_partial.scss # Partial will not be generated to a CSS file
↓
public/styles/main.css
-
npm start
Start local development server.
During development, Sass compiler and ESLint will run automatically when you save a file. -
npm test
Run ESLint. -
npm run build
Run ESLint, compile Sass to CSS and optimize images. -
npm run
Show all available tasks. See npm-run-script document for more details.
Copyright (c) 2016 Hiroyuki Tanjo. Licensed under the MIT License.