Combine and minify GIT File Bridge CSS/JS

(Ryan Archer) #1

Working with using the GIT File Bridge as a workflow to make changes to our website CSS and JS files on our chosen local web editors (i.e. Brackets/Sublime) and then committing them to the repo and then it automatically being pushed into a website using the GIT File Bridge. Works great and we always wanted something like this as opposed to editing directly in Squiz, cutting and pasting or re-uploading CSS/JS files.

 

Now I want to be able to combine and minify the CSS/JS into the CSS File Folder and JS File Folder assets but found out that this is simply not possible. Is there a way to do this that I am not aware of?

 

Also it is simply is not possible at this stage? Are there any plans to offer this functionality in the future? - as it would be extremely helpful. As it stands, we are looking to mush all our CSS and JS in GIT into single files where we can (which wasn't really the workflow we set out to do...)

(Aleks Bochniak) #2

Can you use grunt to do all of your minification and concatenation?

(Ryan Archer) #3

Perhaps. That would mean doing it all locally before pushing up to GIT now wouldn't it? Was really hoping the Squiz Matrix would take care of that server-side (after pulling assets from GIT). Think I'd prefer to work with Gulp actually. Just means our team is going to have to develop a workflow locally for each project, run the Gulp/Grunt task and then commit to GIT.

(Anthony Ponomarenko) #4

Have you got access to Squizmap? 

 

https://squizmap.squiz.net/matrix/8694

 

Scheduled in for 5.4 release, which is looking for a release near the end of the year.

(Ryan Archer) #5

Yes, I have access to the Roadmap. Well it's great to know that Squiz team are on it. Can someone from Squiz tell me how you perform the minify and combine operation - does it use something like Grunt or Gulp tasks to perform the operation server-side?

 

Right now, I have configured a Gulp workflow and it works out well. Have a watch tasks set to look for any changes to CSS/JS files in 'source' folder and then runs a task to combine, minify and then create a single file within the 'dist' folder. Then run it through a GIT commit.

(Aleks Bochniak) #6

Can you invest time in setting up a build pipeline? ie. Continuous integration

(Ryan Archer) #7

Maybe I'm already working on that? Bit new to Gulp and I do know that it commonly refers to pipes/pipelines:

var gulp = require('gulp');
var gutil = require('gulp-util');
var uglify = require('gulp-uglify');
var cssnano = require('gulp-cssnano');
var gulpIf = require('gulp-if');
var useref = require('gulp-useref');
//var browserSync = require('browser-sync').create();

// Gulp watch syntax (watching for changes to CSS/JS files)

gulp.task(‘watch’, function(){

    gulp.watch(‘source/css//*.css’, [‘useref’]); //watches for changes to css files

    gulp.watch('source/js//*.js’, [‘useref’]); //watches for changes to js files

})


gulp.task(‘useref’, function(){

  return gulp.src(‘source/.html’)

    .pipe(useref())

    // Minifies only if it’s a JavaScript file

    .pipe(gulpIf(’.js’, uglify().on(‘error’, gutil.log)))

    .pipe(gulpIf(’*.css’, cssnano()))

    .pipe(gulp.dest(‘dist’))

});

This just means everything is done for me as long as I have watch task running in terminal/CMD. All I have to do is commit changes to GIT and it is done.