In this Opencart tutorial, we are setting up the OpenCart theme development environment with a gulp, package.json, yarn or NPM, create files and folder structure for development with the use of SCSS and custom JS and with gulp watch we output them in normal OpenCart theme.

We are already known about AMP(Apache, MySQL, PHP) stack with MAMP, install the Opencart 3.0.3.2 and get used to with the admin interface and files and folder structure of OpenCart. We are using Microsoft Visual Studio code as an Integrated development environment. Before you start this please have a look at this post where we show you how to make the custom theme in OpenCart with the base theme.

Opencart 3 Theme Gulp, SCSS, ES6 set up

We set up the automation tools for custom themes development, it may not be required for simple development but better to have them for continuous development. Steps for setting up Opencart theme development environment and its automation can be below:

  1. Download https://github.com/rupaknepali/opencart-theme-developement-gulp-setup/archive/master.zip or clone this repo https://github.com/rupaknepali/opencart-theme-developement-gulp-setup
  2. Go to catalog/view/theme, paste this folder, unzip and rename the folder opencart-theme-developement-gulp-setup to your theme name.
  3. Then in terminal go to catalog/view/theme/YOURTHEME/dev and run ‘npm install
  4. After all npm packages installed, open dev/gulpfile.js and change the proxy URL “opencart.loc” to your localhost URL
  5. Then in terminal go to catalog/view/theme/YOURTHEME/dev and run “gulp” and then “gulp watch”
  6. Now make changes in the YOURTHEME/dev/scss files or YOURTHEME/dev/js files or YOURTHEME/dev/image or YOURTHEME/dev/fonts, now you will see the changes.
  7. Now you can start the customization
  8. Following are the files and folders structure.

If someone needs more details about the setup then the following steps can help you to set up from the beginning of the Opencart theme development, here we will install node, npm, gulp packages, npm packages as needed and run the gulp to minify CSS and JS and convert the ES6 JS with babel

  1. Download and Install the Node.js

    Go to https://nodejs.org and download the latest version and install it

  2. Install Gulp with npm

    npm install gulp-cli -g

  3. Set up gulpfile.js

    Navigate to your custom theme directory and create dev/ folder then inside it create a JavaScript file named gulpfile.js and paste the following code in it

    const proxyURL = ‘opencart.loc’;

    // Load Gulp…of course
    const { src, dest, task, watch, series, parallel } = require(‘gulp’);

    // CSS related plugins
    var sass = require(‘gulp-sass’);
    var concatCss = require(‘gulp-concat-css’);
    let cleanCSS = require(‘gulp-clean-css’);

    // JS related plugins
    var uglify = require(‘gulp-uglify’);
    var babelify = require(‘babelify’);
    var browserify = require(‘browserify’);
    var source = require(‘vinyl-source-stream’);
    var buffer = require(‘vinyl-buffer’);
    var stripDebug = require(‘gulp-strip-debug’);

    // Utility plugins
    var rename = require(‘gulp-rename’);
    var sourcemaps = require(‘gulp-sourcemaps’);
    var notify = require(‘gulp-notify’);
    var plumber = require(‘gulp-plumber’);
    var options = require(‘gulp-options’);
    var gulpif = require(‘gulp-if’);

    // Browers related plugins
    var browserSync = require(‘browser-sync’).create();

    // Project related variables
    var styleSRC = ‘./scss/*.scss’;
    var styleURL = ‘./../stylesheet/’;
    var mapURL = ‘./’;

    var jsSRC = ‘./js/’;
    var jsFront = ‘custom.js’;
    var jsFiles = [jsFront];
    var jsURL = ‘./../js/’;

    var imgSRC = ‘./image/**/*’;
    var imgURL = ‘./../image/’;

    var fontsSRC = ‘./fonts/**/*’;
    var fontsURL = ‘./../fonts/’;

    var styleWatch = ‘./scss/**/*.scss’;
    var jsWatch = ‘./js/**/*.js’;
    var imgWatch = ‘./image/**/*.*’;
    var fontsWatch = ‘./fonts/**/*.*’;
    var twigWatch = ‘../template/**/*.twig’;

    // Tasks
    function browser_sync() {
    browserSync.init({
    proxy: proxyURL
    });
    }

    function reload(done) {
    browserSync.reload();
    done();
    }

    function css(done) {
    src([styleSRC])
    .pipe(sourcemaps.init())
    .pipe(
    sass({
    errLogToConsole: true,
    outputStyle: ‘compressed’
    })
    )
    .pipe(concatCss(styleURL + ‘stylesheet.css’))
    .pipe(cleanCSS({ compatibility: ‘ie8’ }))
    .on(‘error’, console.error.bind(console))
    //.pipe(rename({ suffix: ‘.min’ }))
    .pipe(sourcemaps.write(mapURL))
    .pipe(dest(styleURL))
    .pipe(browserSync.stream());
    done();
    }

    function js(done) {
    jsFiles.map(function(entry) {
    return browserify({
    entries: [jsSRC + entry]
    })
    .transform(babelify, { presets: [‘@babel/preset-env’] })
    .bundle()
    .pipe(source(entry))
    .pipe(
    rename({
    extname: ‘.min.js’
    })
    )
    .pipe(buffer())
    .pipe(gulpif(options.has(‘production’), stripDebug()))
    .pipe(sourcemaps.init({ loadMaps: true }))
    .pipe(uglify())
    .pipe(sourcemaps.write(‘.’))
    .pipe(dest(jsURL))
    .pipe(browserSync.stream());
    });
    done();
    }

    function triggerPlumber(src_file, dest_file) {
    return src(src_file)
    .pipe(plumber())
    .pipe(dest(dest_file));
    }

    function image() {
    return triggerPlumber(imgSRC, imgURL);
    }

    function fonts() {
    return triggerPlumber(fontsSRC, fontsURL);
    }

    function watch_files() {
    watch(styleWatch, series(css, reload));
    watch(jsWatch, series(js, reload));
    watch(imgWatch, series(image, reload));
    watch(fontsWatch, series(fonts, reload));
    watch(twigWatch, series(reload));
    src(jsURL + ‘custom.min.js’).pipe(
    notify({ message: ‘Gulp is Watching, Happy Coding!’ })
    );
    }

    task(‘css’, css);
    task(‘js’, js);
    task(‘image’, image);
    task(‘fonts’, fonts);
    task(‘default’, parallel(css, js, image, fonts));
    task(‘watch’, parallel(browser_sync, watch_files));

  4. Create folders SCSS, Image, JS, Fonts

    These folders hold files where we make changes the changes and the gulp will complie and create files and folders outside of dev/ folder

  5. Set up the package manager

    Type ‘npm init‘ in your terminal from dev folder as created in step 3. Enter the details that init asked.

  6. Install Dependencies that are needed for gulp.js

    Type ‘npm install –save-dev <packagename> in your terminal, which will download gulp files and its associated dependencies and will create a folder ‘node_modules’. For ours we need:

    npm -i babel/core babel/preset-env babelify browser-sync browserify browserify-shim gulp gulp-autoprefixer gulp-concat gulp-if gulp-notify gulp-options gulp-plumber gulp-rename gulp-sass gulp-sourcemaps gulp-strip-debug gulp-uglify gulp-uglifycss vinyl-buffer vinyl-source-stream

    You can see in package.json following are the dev dependencies:

    “devDependencies”: {
            “@babel/core”: “^7.5.5”,
            “@babel/preset-env”: “^7.5.5”,
            “babelify”: “^10.0.0”,
            “browser-sync”: “^2.26.7”,
            “browserify”: “^16.3.0”,
            “browserify-shim”: “^3.8.14”,
            “gulp”: “^4.0.2”,
            “gulp-autoprefixer”: “^6.1.0”,
            “gulp-concat”: “^2.5.2”,
            “gulp-if”: “^3.0.0”,
            “gulp-notify”: “^3.0.0”,
            “gulp-options”: “^1.1.1”,
            “gulp-plumber”: “^1.2.1”,
            “gulp-rename”: “^1.2.0”,
            “gulp-sass”: “^4.0.2”,
            “gulp-sourcemaps”: “^2.6.5”,
            “gulp-strip-debug”: “^3.0.0”,
            “gulp-uglify”: “^3.0.2”,
            “gulp-uglifycss”: “^1.0.9”,
            “vinyl-buffer”: “^1.0.0”,
            “vinyl-source-stream”: “^2.0.0”
        }

  7. Add some other setting in package.json

    “babel”: {
    “presets”: [
    “@babel/preset-env”
    ]
    },
    “browserify”: {
    “transform”: [
    “browserify-shim”
    ]
    },
    “browser”: {
    “jquery”: “./node_modules/jquery/dist/jquery.js”
    },
    “browserify-shim”: {
    “jquery”: “$”
    },
    “browserslist”: [
    “last 2 version”,
    “> 2%”
    ],

  8. Our full package.json looks like:

    {
        “name”: “opencart-gulp-4-es6”,
        “version”: “1.1.0”,
        “description”: “Opencart theme development with Gulp 4 file setup for Javascript ES6 compiling, plus SCSS, images, and fonts”,
        “author”: “Rupak Nepali <webocreation.com@gmail.com> (https://webocreation.com)”,
        “repository”: {
            “type”: “git”,
            “url”: “https://github.com/rupaknepali/opencart-theme-developement-gulp-setup”
        },
        “keywords”: [
            “opencart”,
            “gulp”,
            “es6”,
            “scss”
        ],
        “devDependencies”: {
            “@babel/core”: “^7.5.5”,
            “@babel/preset-env”: “^7.5.5”,
            “babelify”: “^10.0.0”,
            “browser-sync”: “^2.26.7”,
            “browserify”: “^16.3.0”,
            “browserify-shim”: “^3.8.14”,
            “gulp”: “^4.0.2”,
            “gulp-autoprefixer”: “^6.1.0”,
            “gulp-concat”: “^2.5.2”,
            “gulp-if”: “^3.0.0”,
            “gulp-notify”: “^3.0.0”,
            “gulp-options”: “^1.1.1”,
            “gulp-plumber”: “^1.2.1”,
            “gulp-rename”: “^1.2.0”,
            “gulp-sass”: “^4.0.2”,
            “gulp-sourcemaps”: “^2.6.5”,
            “gulp-strip-debug”: “^3.0.0”,
            “gulp-uglify”: “^3.0.2”,
            “gulp-uglifycss”: “^1.0.9”,
            “vinyl-buffer”: “^1.0.0”,
            “vinyl-source-stream”: “^2.0.0”
        },
        “babel”: {
            “presets”: [
                “@babel/preset-env”
            ]
        },
        “browserify”: {
            “transform”: [
                “browserify-shim”
            ]
        },
        “browser”: {
            “jquery”: “./node_modules/jquery/dist/jquery.js”
        },
        “browserify-shim”: {
            “jquery”: “$”
        },
        “browserslist”: [
            “last 2 version”,
            “> 2%”
        ],
        “license”: “GPL-3.0”,
        “dependencies”: {
            “gulp-clean-css”: “^4.2.0”,
            “gulp-concat-css”: “^3.1.0”
        }
    }

  9. Running automation tool from cmd/terminal.

    Now type ‘gulp ‘ and then ‘gulp watch’

  10. You will see the browser opened at localhost:3000

    Make the changes in SCSS files, JS files, twig files, add images and fonts and the browser reload will happen and you will see the changes.

LEAVE A REPLY

Please enter your comment!
Please enter your name here