This article is aimed at TomatoCart developers. 

You may need to modify the default CSS and Javascript of bootstrap template to custom it. In this case, you must concat and minify the resources again. It is very boring. In this article, I will teach you how to complete such kind of task automatically.

Step 1. Open your command console and go into TomatoCart root directory.

Step 2. Run following command to install NPM globally:

sudo npm install npm -g

Step 3. Run following command to install gulp globally:

sudo npm install --global gulp

Step 4. Run following command to install gulp in your project devDependencies:

sudo npm install --save-dev gulp

Step 5. Run following command to install gulp concat:

sudo npm install --save-dev gulp-concat

Step 6. Run following command to install gulp uglify:

sudo npm install --save-dev gulp-uglify

Step 7. Run following command to install gulp minify css:

sudo npm install --save-dev gulp-minify-css

Step 8. Create a gulpfile.js at the root of your TomtoCart directory.

Step 9. Open gulpfile.js using your favorite editor to enter following code:

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var minifyCSS = require('gulp-minify-css');

var paths = {
	scripts: [
	      'includes/javascript/pop_dialog.js', 
	      'ext/autocompleter/Autocompleter.js',
	      'ext/autocompleter/Autocompleter.Request.js',
	      'ext/autocompleter/Observer.js',
	      'includes/javascript/auto_completer.js',
	      'includes/javascript/popup_cart.js',
	      'includes/javascript/bookmark.js',
	      'templates/bootstrap/javascript/jquery-1.9.1.min.js',
	      'templates/bootstrap/javascript/bootstrap.min.js'
    ],
    css: [
          'templates/bootstrap/css/bootstrap.min.css',
          'templates/bootstrap/css/stylesheet.css',
          'templates/bootstrap/css/stylesheet.responsive.css',
          'ext/autocompleter/Autocompleter.css'
	]
};

gulp.task('scripts', function() {
  return gulp.src(paths.scripts)
  .pipe(uglify())
  .pipe(concat('all.min.js'))
  .pipe(gulp.dest('templates/bootstrap/javascript'));
});

gulp.task('css', function() {
  return gulp.src(paths.css)
  .pipe(minifyCSS())
  .pipe(concat('all.min.css'))
  .pipe(gulp.dest('templates/bootstrap/css'));
});

gulp.task('watch', function() {
  gulp.watch(paths.scripts, ['scripts']);
  gulp.watch(paths.css, ['css']);
});

gulp.task('default', ['watch', 'scripts', 'css']);

Step 10. Run following command to start the gulp:

gulp

Now, you will see following content in your command line console:

It means gulp works normally now to watch any changes within the javascript or css files of your bootstrap template. Once you modify them, gulp will start the concat and minify task automatically to generate the new all.min.css and all.min.js again.

Looking for quality TomatoCart hosting? Check out Arvixe Web Hosting