Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/antonypaquay/gulp-starter-babel
Gulp configuration using Babel with ES Modules
https://github.com/antonypaquay/gulp-starter-babel
babel esmodules gulp sass
Last synced: 26 days ago
JSON representation
Gulp configuration using Babel with ES Modules
- Host: GitHub
- URL: https://github.com/antonypaquay/gulp-starter-babel
- Owner: antonypaquay
- Created: 2023-04-10T10:17:25.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-04-12T20:11:48.000Z (over 1 year ago)
- Last Synced: 2023-07-27T17:50:39.581Z (over 1 year ago)
- Topics: babel, esmodules, gulp, sass
- Language: JavaScript
- Homepage:
- Size: 89.8 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Gulp Starter using Babel with ES Modules
- Compiling your scss files to ``styles.css``
- Compiling ES Modules using Babel to an optimized file ``bundle.min.js``
- Automatically reload your browser when a change is detected
**Requirement:**
You need to install Node.js globally in your operating system, for more information please visit this link
https://nodejs.org/en.
### Installation
Install NPM packages
``npm install``
Then run the development server using ``npm start``
**Happy coding! 🎉**
#### SASS folder structure
The organization of the scss file structure can be adapted according to your preferences, knowing that the output point is the ``styles.scss`` file.
```
sass/
|
|- abstracts/
| |- _variables.scss
| |- _media-query.scss
| |- _colors.scss
| ...
| |- _index.scss
|
|- base/
| |- _base.scss
| |- _reset.scss
| ...
| |- _index.scss
|
|- utils/
| |- _main.scss
| |- _container.scss
| |- _exceptions.scss
| ...
| |- _index.scss
|
|- components/
| |- _buttons.scss
| |- _carousel.scss
| |- _dropdown.scss
| ...
| |- _index.scss
|
|- layout/
| |- _header.scss
| |- _sidebar.scss
| |- _footer.scss
| ...
| |- _index.scss
|
|- pages/
| |- _about.scss
| |- _contact.scss
| ...
| |- _index.scss
|
|- themes/
| |- _theme.scss
| |- _admin.scss
| ...
| |- _index.scss
|
|- vendors/
| |- _bootstrap.scss
| |- _modern-reset.scss
| ...
| |- _index.scss
|
|- style.scss
```