0

I am using a gulp.js file to convert my less code to css and then update the website automatically on save using BrowserSync however, when I save the file no changes have been made. the code for my gulp.js file is below:

var gulp = require('gulp'),
                    less = require('gulp-less'),
                    uglifycss = require("gulp-uglifycss"),
                    path = require('path'),
                    watch = require('gulp-watch'),
                    autoprefixer = require('gulp-autoprefixer'),
                    browserSync = require('browser-sync'),
                    uglify = require('gulp-uglify'),
                    sourcemaps = require('gulp-sourcemaps'),
                    jshint = require('gulp-jshint'),
                    imageResize = require('gulp-image-resize'),
                    rename = require("gulp-rename"),
                    changed = require("gulp-changed"),
                    plumber = require("gulp-plumber"),
                    cmq = require('gulp-combine-media-queries');


            var run = require('gulp-run');

            //gulp.src(['js/**/*.js', '!js/**/*.min.js'])

            gulp.task('default', function () {


                 var devProxy = "mywebsite.dev.chand.co";
            // } 

            browserSync({
                    proxy: devProxy,
                    files: "library/css/*.css"
                });

            //gulp.watch('./library/less/**/*.less', ['compile-css']);

            gulp.watch('./library/less/**/*.less', ['compile-css']);

            gulp.watch(['./library/js/*.js', '!./library/js/main-built.js'], ['javascript']);

            });



            gulp.task('javascript', function() {
             gulp.src(['./library/js/*.js','./library/js/components/*.js', '!./library/js/main-built.js',  '!./library/js/cf7.js'])     // ignore vendor stuff
             .pipe(plumber())    
             .pipe(jshint())
             .pipe(jshint.reporter('default'));

            //    gulp.src(['./library/js/**/*.js', '!./library/js/require.js'])    
               //.pipe(uglify())
            //     .pipe(gulp.dest('library/dist/js'));


            run('r.js -o build.js').exec();
            });


            gulp.task('compile-css', function () {
            gulp.src('./library/less/main.less')
                        .pipe(plumber())    
                        .pipe(sourcemaps.init())
                        .pipe(less())
                        .pipe(autoprefixer())
                        //.pipe(uglifycss())
                        .pipe(sourcemaps.write('./maps'))
                        .pipe(gulp.dest('./library/css/'));



            gulp.src('./library/less/admin.less')
                        .pipe(plumber())    
                        .pipe(sourcemaps.init())
                        .pipe(less())
                        .pipe(autoprefixer())
                        //.pipe(uglifycss())
                        .pipe(sourcemaps.write('./maps'))
                        .pipe(gulp.dest('./library/css/'));

            gulp.src('./library/less/editor-style.less')
                        .pipe(plumber())    
                        .pipe(sourcemaps.init())
                        .pipe(less())
                        .pipe(autoprefixer())
                        //.pipe(uglifycss())
                        .pipe(sourcemaps.write('./maps'))
                        .pipe(gulp.dest('./library/css/'));


            gulp.src('./library/less/style-bootstrap.less')
                        .pipe(plumber())    
                        //.pipe(sourcemaps.init())
                        .pipe(less())
                        .pipe(autoprefixer())
                        //.pipe(uglifycss())

                        .pipe(gulp.dest('./library/css/'));

            return; 

            });

            gulp.task('dist-css', function () {
            gulp.src('./library/less/main.less')
                        .pipe(less())
                        .pipe(autoprefixer())
                        .pipe(cmq({
                          log: true
                        }))
                        .pipe(uglifycss())
                        .pipe(gulp.dest('./library/css/'));




            gulp.src('./library/less/admin.less')
                        //.pipe(sourcemaps.init())
                        .pipe(less())
                        .pipe(autoprefixer())
                        .pipe(uglifycss())
                        //.pipe(sourcemaps.write('./maps'))
                        .pipe(gulp.dest('./library/css/'));

            gulp.src('./library/less/editor-style.less')
                        //.pipe(sourcemaps.init())
                        .pipe(less())
                        .pipe(autoprefixer())
                        .pipe(uglifycss())
                        //.pipe(sourcemaps.write('./maps'))
                        .pipe(gulp.dest('./library/css/'));



            });




            gulp.task('resize-images', function () {

            // this doesn't happen automatically, because it's a bit intensive, it should be done when we need.

            var originalName;

             gulp.src("images/src/**/*.{jpg,png}")
            .pipe(changed("images/dist"))


            // This isn't ideal, but it'll work fine
            // Make sure that you go BIGGEST FIRST because of piping

            // Need to change renaming to the wordpress convention

            // need to specify heights?

            // need to do lossless optimisation

            // remember to set new name as well as new size for each resize.
            .pipe(imageResize({ 
                imageMagick : true,
                width : 200
            }))
            .pipe(rename(function (path) {
                originalName = path.basename;
                path.basename = originalName + "-200";        
            }))
            .pipe(gulp.dest("images/dist"))


            .pipe(imageResize({ 
                imageMagick : true,
                width : 100
            }))
            .pipe(rename(function (path) {
                path.basename = originalName + "-100";        
            }))
            .pipe(gulp.dest("images/dist"));

            });
4
  • First of all, you could make the code a whole lot simpeler. Gulp.src can glob (see: github.com/isaacs/node-glob#glob-primer) return gulp.src('./library/less/{main, admin,editor-style, style-bootstrap}.less') .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(less()) .pipe(autoprefixer()) //.pipe(uglifycss()) .pipe(sourcemaps.write('./maps')) .pipe(gulp.dest('./library/css/')); Do you mean that the files are not updated, or that the they were never written to the expected location? Commented Nov 3, 2015 at 20:47
  • @Rik - Thanks, I will clean it up. When i update the less file, I can see it has changed in the CSS but it does not update my page CSS although its reloading the page soon as I make a change. Commented Nov 4, 2015 at 10:23
  • So if I understand correctly, your less task is working, and your css is moved to the correct location, but on a refresh it is not loaded in the browser. This sounds like a caching problem in the browser. What happens if yo mannually reload (Ctrl+F5)? Does it refresh the css then, because then it is definitly a caching problem. Commented Nov 4, 2015 at 11:48
  • I added a possible solution for you Commented Nov 4, 2015 at 11:58

2 Answers 2

2

It looks like you are having a caching problem I read more about this for css + browsersync. this post might help you. This could be your solution then.

move your watch to a seperate task

gulp.task('watch', ['browser-sync'], function(){
    gulp.watch('./library/less/**/*.less', ['compile-css']);
    gulp.watch('./library/css/**/*.css').on('change', browserSync.reload);
});

and let it depend on browser-sync

gulp.task('browser-sync', function() {
    var devProxy = "mywebsite.dev.chand.co";
    browserSync({
        proxy: devProxy,
        files: "library/css/*.css"
    });
});

And then change default to

gulp.task('default', 'watch');

read more about reloading + browserSync here

Sign up to request clarification or add additional context in comments.

9 Comments

thanks very much for this. I will try this solution when I get to work tomorrow. Just a thought could it be the source maps not updating?
I doubt that. Source maps are merely for debugging purposes. In your snippet they are also commented, but don't know if you commented it to see if it would help.
I've tried this solution but it still dosent seem to update the css on the page
Have you tried reloading th epage manually with Ctrl+F5, and do you see the changes then?
this is working now. For some reason it started to update. Thanks Rik for all your help and efforts!
|
0

It's also worth trying to delete your compressed CSS and JavaScript files manually.

rm -f web/css/compressed/style.css for example

...and then trying a gulp build again.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.