Welcome to gulp-front 👋

Front-end components

🏠 Homepage

• Install
• Usage
• Overview
• Features
• Browser Support
• Prerequisites
• Commands
• Error install

Install

npm install

Usage

npm start

Overview

gulp-front is an opinionated generator for web development. Tools for building a great experience across many devices. A solid starting point for both professionals and newcomers to the industry.

Features

	Available
Browsersync	✅
Pug	✅
Twig	✅
Sass	✅
Less	✅
GulpV4	✅
Webpack	✅
Typescript	✅
JavaScript ES6+ Support	✅
State Management	✅
PostCSS support	✅
Live Browser Reloading	✅
Code spliting	✅
Optimize Images	✅
Minify Css and Javascript	✅
SEO	✅
Unit test	❌

Browser

At present, I officially aim to support the last two versions of the following browsers:

• Chrome
• Edge
• Firefox
• Safari
• Internet Explorer

This is not to say that gulp-front cannot be used in browsers older than those reflected, but merely that my focus will be on ensuring our layouts work great in the above.

Prerequisites

NOTE: For OSX users You may have some issues compiling code during installation of packages. Please install Xcode from App Store first. After Xcode is installed, open Xcode and go to Preferences -> Download -> Command Line Tools -> Install to install command line tools.

NOTE: For Windows users You may have some issues compiling BrowserSync during installation of packages. Please go to http://www.browsersync.io/docs/#windows-users for more information on how to get all the needed dependencies.

Node.js

Bring up a terminal and type node --version. Node should respond with a version at or above 12.x.x. If you need to install Node, go to nodejs.org and click on the big green Install button.

Gulp

Bring up a terminal and type gulp --version. If Gulp is installed it should return a version number at or above 4.x.x. If you need to install/upgrade Gulp, open up a terminal and type in the following:

$ npm install --global gulp

$ npm install --global gulp-cli

You can use gulp-cli without install globally by flowing:

$ npx gulp [your_gulp_task]

This will install Gulp globally. Depending on your user account, you may need to configure your system to install packages globally without administrative privileges.

Local dependencies

Next, install the local dependencies requires:

$ npm install

That's it! You should now have everything needed to use the gulp-component.
You may also want to get used to some of the commands available.

Commands

There are few commands available to help you build and test sites:

Development mode

Watch For Changes & Automatically Refresh Across Devices

$ npm start

npm start task creates the tmp folder in the root of the project. This includes linting as well as image, script, stylesheet and HTML optimization. Also, a browsersync script will be automatically generated, which will take care of precaching your sites resources.

Build (production) mode

Serve the Fully Built & Optimized Site

$ npm run build

npm run build task creates the build folder in the root of the project with minifying files. It will help you to create clear instances of code for the production or further implementation.

Create component

$ npm run add [component_name][files]

$ npm run add header[.js,.pug,.scss]

Create page

$ npm run add page [page_name][files]

$ npm run add index[.js,.pug,.scss]

Error install

Error: ENOENT: no such file or directory, scandir

$ npm update
$ npm install
$ node node_modules/node-sass/scripts/install.js
$ npm rebuild node-sass

Can not install node-gym (Window error)

Open powershell as admin then install windows-build-tools

$ npm install --global --production windows-build-tools
$ npm install --global node-gyp

Author

👤 ngocsangyem

• Website: https://ngocsangyem.io/
• Twitter: @ngocsangyem
• Github: @ngocsangyem
• LinkedIn: @ngocsangyem

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page. You can also take a look at the contributing guide.

Show your support

Give a ⭐️ if this project helped you!

Todo

• Document

📝 License

Copyright © 2020 ngocsangyem.
This project is MIT licensed.