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-bine-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', ['pile-css']);
gulp.watch('./library/less/**/*.less', ['pile-css']);
gulp.watch(['./library/js/*.js', '!./library/js/main-built.js'], ['javascript']);
});
gulp.task('javascript', function() {
gulp.src(['./library/js/*.js','./library/js/ponents/*.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('pile-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"));
});
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-bine-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', ['pile-css']);
gulp.watch('./library/less/**/*.less', ['pile-css']);
gulp.watch(['./library/js/*.js', '!./library/js/main-built.js'], ['javascript']);
});
gulp.task('javascript', function() {
gulp.src(['./library/js/*.js','./library/js/ponents/*.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('pile-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"));
});
-
First of all, you could make the code a whole lot simpeler. Gulp.src can glob (see: github./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? – Rik 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. – Raj Chudasama 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. – Rik Commented Nov 4, 2015 at 11:48
- I added a possible solution for you – Rik Commented Nov 4, 2015 at 11:58
2 Answers
Reset to default 2It 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', ['pile-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
It's also worth trying to delete your pressed CSS and JavaScript files manually.
rm -f web/css/pressed/style.css for example
...and then trying a gulp build again.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745472219a4629185.html
评论列表（0条）