项目作者: tabuckner

项目描述 :
Gulp/Materialize boiler
高级语言: CSS
项目地址: git://github.com/tabuckner/gulp-materialize.git
创建时间: 2018-02-12T22:20:58Z
项目社区:https://github.com/tabuckner/gulp-materialize

开源协议:

下载


Gulp Materialize Boilerplate

Boiler plate for those who want things like materializecss, babel, eslint, sass, pug templating, but would perfer to use gulp

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Project Structure

Summary

This is my take on a JAMstack project. We use gulp to handle all task running. Precompilation of SASS, transpilation of (es6 => es2015) JS, image minification, and pug template compilation is all handled in the default Gulp task yarn gulp. This allows for responsive changes without losing the benefits of newer technologies.

yarn gulp will compile the app/src folder into app/build. app/build is then served via BrowserSync. Several watch scripts will refresh the browser when necessary.

File Structure Diagram

  1. Project/
  2. ├── app/
  3. ├── build/
  4. ├── css
  5. └── <compiled-styles>.css
  6. ├── img
  7. └── <minified-images>.<ext>
  8. ├── js
  9. ├── vendor.js
  10. └── main.js (babelified)
  11. └── index.html
  12. └── src/
  13. ├── fonts
  14. └── <fonts>.<ext>
  15. ├── img
  16. └── <raw-images>.<ext>
  17. ├── js
  18. ├── vendor/
  19. └── main.js (es6)
  20. ├── scss
  21. ├── components/
  22. └── <vendor components>
  23. ├── _variables.scss
  24. ├── materialize.scss
  25. └── styles.scss
  26. └── views
  27. ├── components/
  28. └── component.pug
  29. ├── includes/
  30. ├── footer.pug
  31. ├── head.pug
  32. └── nav.pug
  33. └── index.pug
  34. ├── dist/
  35. ├── css
  36. └── <compiled-styles>.css
  37. ├── fonts
  38. └── <fonts>.<ext>
  39. ├── img
  40. └── <minified-images>.<ext>
  41. ├── js
  42. ├── main.min.js
  43. └── main.min.js.map
  44. └── index.html
  45. ├── .eslintrc
  46. ├── .gitignore
  47. ├── gulpfile.js
  48. ├── package.json
  49. ├── README.md
  50. └── yarn.lock

Prerequisites

Node, NPM, Yarn

Everything should be a dev-dependency and can be accessed via scripts in package.json

  1. //package.json
  2. {
  3. ...,
  4. "scripts": {
  5. ...
  6. "gulp": "gulp",
  7. ...
  8. }
  9. {...},
  10. "author": "tabucker",
  11. "license": "MIT",
  12. "devDependencies": {
  13. ...
  14. "gulp": "^3.9.0",
  15. ...
  16. }
  17. }

In this case, gulp can be accessed via:

  1. yarn gulp <gulp task>

Installing

Assuming you have the pre-reqs:

Install

  1. yarn install

Running the tests

Currently only a JS linter is in place, courtesy of ESLint:

  1. yarn gulp lint

Note This is also run as a pre-commit script using husky. Think git-hooks without an install-githooks.sh This can be removed.

Coding Style Test

JS style enforced via ESLint and the AirBnB model.

  1. //.eslintrc
  2. {
  3. "env": {
  4. ...
  5. },
  6. "extends": "airbnb-base",
  7. "parser": "babel-eslint",
  8. "parserOptions": {
  9. ...
  10. }
  11. }

Deployment

Integrate however you would like. yarn gulp build:prod will provide you your dist files.

  1. yarn gulp build

Contributing

Submit a PR.

Authors

License

This project is licensed under the MIT License