Development

Infinia was built with the latest Bootstrap version, and comes packed with smart developer tools such as Gulp, gulp-file-include, Autoprefixer, SASS, Concat, Browsersync…etc… which will save you time and help you build your project faster and more efficiently.

---

Learn how to included npm scripts to automate your time-consuming tasks in your development workflow with Gulp toolkit.

Quick Start

Infinia uses NPM scripts for its build system. Our package.json includes convenient methods for working with the framework, including compiling code, running tests, and more.

To use our build system and run our documentation locally, you'll need a copy of Infinia's development source files and NodeJS. Follow these steps and you should be ready to rock:

1. Download and install Node.js , which we use to manage our dependencies.
2. Download and install Gulp.js , which we use to manage our dependencies.
3. Navigate to the root infinia-development directory and run npm install to install our local dependencies listed in package.json.

When completed, you'll be able to run the various commands provided from the command line.

Installing NPM modules

Start by navigating to the directory where your Infinia folder is located. If this is your first time, you can refer to the following article for a quick start guide. To execute the package.json file, use the command below:

npm install

If you check the project folder when the command has finished executing, you should see that Gulp has created a node_modules folder.

Run Gulp

Compile and watch the PUG/SCSS/JS/HTML, use Live Reload to update browsers instantly, start a server, and pop a tab in your default browser. Any changes made to the source files will be compiled as soon as you save the file. To try it out run:

First, run this command

npm run build

After a few seconds, a folder called dist is created, which is the HTML files you use to run the website.

Start Server

npm run dev

The website will open in your browser at: http://localhost:3000

package.json

     
        {
            "name": "infinia-bootstrap-dev",
            "version": "1.0.0",
            "description": "Gulp development tasks",
            "author": "",
            "license": "ISC",
            "scripts": {
                "dev": "gulp dev",
                "build": "gulp build"
            },
            "devDependencies": {
                "browser-sync": "^3.0.2",
                "gulp": "^4.0.2",
                "gulp-autoprefixer": "^6.1.0",
                "gulp-clean": "^0.4.0",
                "gulp-concat": "^2.6.1",
                "gulp-file-include": "^2.3.0",
                "gulp-format-html": "^2.3.0",
                "gulp-html-beautify": "^1.0.1",
                "gulp-once": "^2.1.1",
                "gulp-sass": "^5.1.0",
                "gulp-sourcemaps": "^3.0.0",
                "prettier": "^3.2.4",
                "sass": "^1.62.1"
            }
        }
    
 

gulpfile.js

    
const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const sourcemaps = require('gulp-sourcemaps');
const autoprefixer = require('gulp-autoprefixer');
const includeHTML = require('gulp-file-include');
const beautify = require('gulp-html-beautify');
const browserSync = require('browser-sync').create();
const once = require('gulp-once');
// Include HTML files
function includeHtml() {
    return gulp
        .src(['src/views/pages/*.html'])
        .pipe(
            includeHTML({
                prefix: '@@',
                basepath: '@file',
            }),
        )
        .pipe(gulp.dest('dist'))
        .pipe(browserSync.stream());
}
// Beautify HTML
function beautifyHtml() {
    return gulp
        .src('dist/**/*.html')
        .pipe(beautify({ indent_size: 4 }))
        .pipe(gulp.dest('dist'));
}
// Copy other resource files
function copyAssets() {
    return gulp
        .src(
            [
                'src/assets/css/**/*',
                'src/assets/fonts/**/*',
                'src/assets/images/**/*',
                'src/assets/imgs/**/*',                
                'src/assets/img/**/*',
                'src/assets/js/**/*',
            ],
            { base: 'src/assets' },
        )
        .pipe(gulp.dest('dist/assets'));
}
// Copy other resource files
function copyAssetsChanged() {
    return gulp.src(['src/assets/css/**/*', 'src/assets/fonts/**/*', 'src/assets/images/**/*', 'src/assets/imgs/**/*', 'src/assets/img/**/*', 'src/assets/js/**/*'], { base: 'src/assets' }).pipe(once()).pipe(gulp.dest('dist/assets')).pipe(browserSync.stream());
}
// Sass
function buildStyles() {
    return gulp.src('src/assets/scss/main.scss').pipe(sourcemaps.init()).pipe(sass().on('error', sass.logError)).pipe(autoprefixer()).pipe(sourcemaps.write('')).pipe(gulp.dest('src/assets/css/'));
}
// Build task
gulp.task('build', gulp.series(includeHtml, beautifyHtml, buildStyles, copyAssets));
// Initialize BrowserSync and track changes
gulp.task(
    'dev',
    gulp.series('build', function () {        
        // Watch tasks
        gulp.watch('src/views/**/*.html', gulp.series(includeHtml));
        gulp.watch('src/assets/scss/**/**/*', gulp.series(buildStyles));
        gulp.watch(['src/assets/css/**/*', 'src/assets/fonts/**/*', 'src/assets/images/**/*','src/assets/imgs/**/*', 'src/assets/img/**/*', 'src/assets/js/**/*'], copyAssetsChanged);
        browserSync.init({
            server: {
                baseDir: 'dist',
            },
            hot: true,
        });
    }),
);
// Default action
gulp.task('default', gulp.series('dev'));
    

Note

Sometimes you may encounter the error: "DeprecationWarning: fs.Stats constructor is deprecated", don't worry, this is due to incompatibility between NodeJS versions, it does not affect your development process. . Please ignore it.