Automate time-consuming or repetitive tasks in your development workflow using Gulp 🥤
Installing Node & Gulp and running it is super easy in Materio, please follow these steps and you should be ready to rock 🤘
LTS
and jump to step 2.npm install --global yarn
npm install --global gulp-cli
package.json
. npm
OR yarn
as per your preference.# For Yarn
yarn
# For npm
npm install
npm
tasks, below command will start the server and watch the code using browsersync. Open http://localhost:3000/ to check your development 🚀# yarn
yarn serve
# npm
npm run serve
The above command will install all the required Node.js modules into the node_modules/
directory inside your app folder. While installing this command you may see few warnings, don't worry about that for more details refer to our FAQ npm/yarn install warnings.
Materio using VS Code as a primary editor. You can find .vscode/
folder in your downloaded package. It includes predefined extensions.json
and settings.json
files for VS Code.
Find below steps to start project with VS Code :
.vscode/
folder in VS Code editor.@recommended
and Install Workspace Recommended Extensions.eslintignore
, .eslintrc.json
, .prettierignore
and .prettierrc.json
) for better code formatting and linting.
Materio's build system is a simple but powerful solution. It uses NPM scripts for its build system. To utilize the power of Gulp & Webpack to achieve maximum automation to help developers saving their precious time for any kind of manual and repetitive tasks and file changes.
build-config.js
file. Read moregulp-environment
. To add environment edit gulp-environment.environments
section within package.json
file.The following files powers the Gulp & Webpack:
📦
├── 📂 ...
├── 📂 tasks > Gulp tasks
│ ├── 📄 build.js > Gulp tasks for development build
│ └── 📄 prod.js > Gulp tasks for production build
├── ...
├── 📄 .browserslistrc > Browserslist config for Autoprefixer
├── 📄 build-config.js > Template build config file 👷
├── 📄 gulpfile.js > Gulpfile 🥤
├── 📄 index.html > Index page to check all demos
├── 📄 package.json > Heart of Node, contain all npm tasks 🛠
└── 📄 webpack.config.js > Webpack file to transpile & bundle JS files.
Build Config
Materio use build-config.js
for development and production related build configuration. You can use it to set build configuration i.e buildTemplatePath, buildPath, distPath, minify and sourcemap etc...
Below is the build-config.js
file code which contain useful comments to understand the each properties. Make sure you read them carefully.
module.exports = {
base: {
// Excludes folders relative to `root` directory.
exclude: ['html', 'html-starter', 'html-demo', 'dist', 'build', 'assets', 'tasks', 'node_modules', '_temp'],
// Base Path to Serve from using Browser Sync, Currently set to root of the project
// You can also point to specific folder like 'build/'
serverPath: './',
// Template/Folder to build for production
buildTemplatePath: 'html/vertical-menu-template',
// Folder for production build
buildPath: './build'
},
development: {
// Build path can be both relative or absolute.
// Current dist path is `./assets/vendor` which will be used by templates from `html\` directory. Set distPath: './dist' to generate assets in dist folder.
distPath: './assets/vendor',
// Minify assets.
minify: false,
// Generate sourcemaps.
sourcemaps: true,
// https://webpack.js.org/configuration/devtool/#development
devtool: 'eval-source-map',
// Use this option with caution because it will remove entire output directory.
// Will affect only and `build` command
cleanDist: false
},
production: {
// Build path can be both relative or absolute.
// Current dist path is `./assets/vendor` which will be used by templates from `html\` directory. Set distPath: './dist' to generate assets in dist folder.
distPath: './assets/vendor',
// Minify assets.
// Note: Webpack will minify js sources in production mode regardless to this option
minify: true,
// Generate sourcemaps.
sourcemaps: false,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Use this option with caution because it will remove entire output directory.
// Will affect only `build:prod` command
cleanDist: true
}
};
Open command prompt/terminal, go to the Materio root directory and run yarn {task_name}
. For example, To generate build run yarn build
.
Run a task with specified environment(development/production) just execute the task with --env={environment}
option, For example, yarn build --env=production
.
yarn run
command to list all predefined npm tasks from package.json
file.
Development build
Development tasks use tasks/build.js
and generate compiled assets in assets/vendors
folder for development purpose.
dist/
folder, set distPath: 'dist'
in build-config.js
file.
When you execute build task, it performs the following actions:
build-config.js
.cleanDist
option is true
.build:css
Compile each SCSS files which filename is does not starts with a _ symbol and generate CSS.build:js
- Collects all .js files which filename is not starting with a _ symbol. Then performs transpile & compilation via Webpack and Babel.build:fonts
- Collects fonts file which is defined in the tasks/build.js
file as FONT_TASKS
and copy them from node_modules.build:copy
- Copies images and other font filesTask (yarn
or gulp
) lists for development build.
Yarn Task | Gulp Task | Description |
---|---|---|
yarn serve |
gulp serve |
Run the local node server on serverPath (defined in build-config.js ) path. |
yarn watch |
gulp watch |
Watch files for changes and automatically recompile them when it changed. |
yarn build |
gulp build |
Compile sources and copy assets. |
yarn build:css |
gulp build:css |
Compile SCSS sources and generate CSS. |
yarn build:js |
gulp build:js |
Transpile & Compile JS sources using Webpack. |
yarn build:fonts |
gulp build:fonts |
Copy fonts from node_module/ to fonts/ that defined in the tasks/build.js . |
yarn build:copy |
gulp build:copy |
Copy images, fonts and other assets files. |
Production build
Production tasks use tasks/prod.js
and generate build/
folder for production ready html and assets.
When you execute production build task, it performs the following actions:
prodCopyTask
tasks will copy html (templatePath
only) and assets files to the buildPath
prodRenameTasks
tasks will replace the assets path.prodUseRefTasks
tasks use gulp-useref
to concat common js files to core.js
to reduce http-requests.buildTemplatePath
to choose template for build purpose i.e vertical-menu-template, horizontal-menu-template from build-config.js
.
Task (yarn
or gulp
) lists for production build.
Yarn Task | Gulp Task | Description |
---|---|---|
yarn build:prod |
gulp build --env=production |
Run build task in production environment. |
yarn build:prod:css |
gulp build:css --env=production |
Run build:css task in production environment. |
yarn build:prod:js |
gulp build:js --env=production |
Run build:js task in production environment. |
yarn build:prod:fonts |
gulp build:fonts --env=production |
Run build:fonts task in production environment. |
yarn build:prod:copy |
gulp build:copy --env=production |
Run build:copy task in production environment. |