How do I get the css files to update in the browser like livereload but have php files trigger a full reload? Everything else in my gulpfile is working, but nothing seems to be happening after gulp.dest. There's no errors and the output in my console is:
Starting 'sass'...
Finished 'sass' after 26 ms
write ./\main.css
gulpfile.js
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
browserSync = require('browser-sync').create(),
php = require('gulp-connect-php'),
sourcemaps = require('gulp-sourcemaps');
var paths = {
base: './**/',
webroot: './public_html/',
lib: './public_html/lib/'
};
paths.scssPath = paths.lib + 'scss/**/';
paths.scssMain = paths.scssPath + 'main.scss';
paths.scssAll = paths.scssPath + '*.scss';
paths.phpAll = paths.webroot + '**/*.php';
paths.css = paths.webroot + 'css/';
paths.cssAll = paths.css + '**/*.css';
gulp.task('php', function() {
php.server({ base: 'public_html', port: 8010, keepalive: true });
});
gulp.task('browser-sync', ['php'], function() {
browserSync.init({
proxy: 'localhost:8000/',
port: 8080,
open: true,
notify: false
});
});
gulp.task('sass', function () {
return sass(paths.scssMain)
.on('error', function(err) {
console.error('Error!', err.message);
})
.pipe(sourcemaps.write())
.pipe(gulp.dest(paths.css))
.pipe(browserSync.stream({match: '**/*.css'}));
});
gulp.task('default', ['sass', 'browser-sync'], function() {
gulp.watch(paths.scssAll, ['sass']);
gulp.watch([paths.phpAll], browserSync.reload);
});
Related
I just can't get gulp-autoprefixer to work. I was testing it with transitions but when I save my scss file the prefixes don't show up in my css file. Everything else seems to be just fine.
This is my gulp file:
var gulp = require('gulp'),
plumber = require('gulp-plumber'),
rename = require('gulp-rename'),
autoprefixer = require('gulp-autoprefixer'),
imagemin = require('gulp-imagemin'),
cache = require('gulp-cache'),
sass = require('gulp-sass'),
browserSync = require('browser-sync');
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./"
}
});
});
gulp.task('bs-reload', function () {
browserSync.reload();
});
gulp.task('images', function(){
gulp.src('build/images/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('images/'));
});
gulp.task('styles', function(){
gulp.src(['scss/**/*.scss'])
.pipe(plumber({
errorHandler: function (error) {
console.log(error.message);
this.emit('end');
}}))
.pipe(sass())
.pipe(autoprefixer('last 2 versions'))
.pipe(gulp.dest('css/'))
.pipe(browserSync.reload({stream:true}))
});
gulp.task('default', ['browser-sync'], function(){
gulp.watch("scss/**/*.scss", ['styles']);
gulp.watch("*.html", ['bs-reload']);
});
Thank you all for your help!!
UPDATE
var gulp = require('gulp'),
plumber = require('gulp-plumber'),
rename = require('gulp-rename'),
autoprefixer = require('gulp-autoprefixer'),
imagemin = require('gulp-imagemin'),
cache = require('gulp-cache'),
sass = require('gulp-sass'),
browserSync = require('browser-sync');
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./"
}
});
});
gulp.task('bs-reload', function () {
browserSync.reload();
});
gulp.task('images', function(){
gulp.src('build/images/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('images/'));
});
gulp.task('styles', function(){
gulp.src(['scss/**/*.scss'])
.pipe(plumber({
errorHandler: function (error) {
console.log(error.message);
this.emit('end');
}}))
.pipe(sass())
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('css/'))
.pipe(browserSync.reload({stream:true}))
});
gulp.task('default', ['browser-sync'], function(){
gulp.watch("scss/**/*.scss", ['styles']);
gulp.watch("*.html", ['bs-reload']);
});
According to the documentation, the implementation is slightly different to what you have:
const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');
gulp.task('default', () =>
gulp.src('src/app.css')
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('dist'))
);
It now specifically passes an object containing browsers as an array.
This might be dependent upon the version you're using, because I have Gulpfiles that use an older syntax that looks more like yours.
I have an Ionic V1 app and I did ionic setup sass.
I've added the scss in watchPatterns in ionic.config.json. Gulp detects the file change but doesn't compile the scss into the css. Tried a lot of things.
I did ionic setup sass twice. It seems that the sass only compiles into css once I do ionic setup sass.
Here's the gulpfile.js
var gulp = require('gulp');
var gutil = require('gulp-util');
var bower = require('bower');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var sh = require('shelljs');
var paths = {
sass: ['./scss/**/*.scss']
};
gulp.task('default', ['sass']);
gulp.task('sass', function(done) {
gulp.src('./scss/ionic.app.scss')
.pipe(sass())
.on('error', sass.logError)
.pipe(gulp.dest('./www/css/'))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('./www/css/'))
.on('end', done);
});
gulp.task('watch', function() {
gulp.watch(paths.sass, ['sass']);
});
gulp.task('install', ['git-check'], function() {
return bower.commands.install()
.on('log', function(data) {
gutil.log('bower', gutil.colors.cyan(data.id), data.message);
});
});
gulp.task('git-check', function(done) {
if (!sh.which('git')) {
console.log(
' ' + gutil.colors.red('Git is not installed.'),
'\n Git, the version control system, is required to download Ionic.',
'\n Download git here:', gutil.colors.cyan('http://git-scm.com/downloads') + '.',
'\n Once git is installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.'
);
process.exit(1);
}
done();
});
I updated to IONIC 2 few days and have the same problem.
Just add these 2 lines to your gulpfile.js:
gulp.task('serve:before', ['default','watch']);
gulp.task('run:before', ['default']);
It's working for me.
I had similar issue and the problem started, when I had upgraded ionic-cli to version 2.x. So I would suggest you to downgrade back to version 1.x.x.; for example I am using last subversion:
npm install -g ionic#1.7.16
For me, now everything works as it was before the upgrade (I am using same gulp file, I also rename "ionic.config.json" back to "ionic.project"). Hope it helps!
Check TomiL's answer, it might be able to help you. If not, try running two cmd's, first type ionic serve, and in the other one type gulp default, or whatever your task name is. here's my gulpfile
var gulp = require('gulp');
var gutil = require('gulp-util');
var bower = require('bower');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var sh = require('shelljs');
var paths = {
sass: ['./scss/*.scss']
};
gulp.task('default', ['sass']);
gulp.task('sass', function(done) {
gulp.src('./scss/ionic.app.scss')
.pipe(sass())
.on('error', sass.logError)
.pipe(gulp.dest('./www/css/'))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('./www/css/'))
.on('end', done);
});
gulp.task('watch', function() {
gulp.watch(paths.sass, ['sass']);
});
gulp.task('install', ['git-check'], function() {
return bower.commands.install()
.on('log', function(data) {
gutil.log('bower', gutil.colors.cyan(data.id), data.message);
});
});
gulp.task('git-check', function(done) {
if (!sh.which('git')) {
console.log(
' ' + gutil.colors.red('Git is not installed.'),
'\n Git, the version control system, is required to download Ionic.',
'\n Download git here:', gutil.colors.cyan('http://git-scm.com/downloads') + '.',
'\n Once git is installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.'
);
process.exit(1);
}
done();
});
I've got the same issue. I found out that it's because gulp doesn't compile scss files before 'ionic serve', so just add the task below solved the problem:
gulp.task('serve:before', ['default']);
im working on a wordpress theme with less and gulp. Since i need to adjust some default paths and values for bootstrap + fontaweseome i have a less file with my custom vars (overwrite.less). but it doesnt affect the variables at all.
Less files get injected via mainBowerFiles, the docs say less vars support lazy load. (http://lesscss.org/features/#variables-feature-lazy-loading)
files get cached to speed up the build ( < 10 ms) but even without - no effect.
gulpfile.js:
'use strict';
var gulp = require('gulp');
var less = require('gulp-less');
var browserSync = require('browser-sync').create();
var util = require('gulp-util');
var sourceMaps = require('gulp-sourcemaps');
var del = require('del');
var cache = require('gulp-cached');
var remember = require('gulp-remember');
var concat = require('gulp-concat');
var minifyCss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var mainBowerFiles = require('main-bower-files');
var paths = {
target: '../vagrant/www/wordpress/wp-content/themes/themename',
bowerJs: mainBowerFiles('**/*.js'),
bowerLess: mainBowerFiles('**/*.less'),
lessFiles: ['overwrite.less','less/**.less'],
jsFiles: ['js/**.js']
};
var allLess = paths.bowerLess.concat(paths.lessFiles);
var allJs = paths.bowerJs.concat(paths.jsFiles);
function compileLess() {
var s = gulp.src(allLess);
s = s.pipe(sourceMaps.init());
s = s.pipe(cache('less'));
s = s.pipe(less());
s = s.pipe(remember('less'));
s = s.pipe(minifyCss());
s = s.pipe(concat('style.css'));
s = s.pipe(sourceMaps.write('maps/'));
return s.pipe(gulp.dest(paths.target));
}
function compileJs() {
var s = gulp.src(allJs);
s = s.pipe(sourceMaps.init());
s = s.pipe(cache('js'));
s = s.pipe(uglify());
s = s.pipe(remember('js'));
s = s.pipe(concat('app.js'));
s = s.pipe(sourceMaps.write('maps/'));
return s.pipe(gulp.dest(paths.target));
}
gulp.task('move', function() {
var filesToMove = ['./*.php', './assets/**', 'bower_components/**', './partial/**'];
gulp.src(filesToMove, { base: './' })
.pipe(gulp.dest('../vagrant/www/wordpress/wp-content/themes/codecampus')).once('end', function () {
browserSync.reload();
});
});
gulp.task('browser-sync', function() {
browserSync.init([], {
proxy: "http://vccw.dev/"
});
});
gulp.task('watch', function () {
gulp.watch('less/**/*.less', ['less']);
gulp.watch('js/**/*.js', ['js']);
gulp.watch(['./*.php', './assets/**', './partial/**'], ['move'])
});
gulp.task('less', function () {
util.log('Compile less ...');
browserSync.reload();
return compileLess();
});
gulp.task('js', function () {
util.log('Compile js ...');
browserSync.reload();
return compileJs();
});
gulp.task('clean', function (cb) {
util.log('Delete old less ...');
del([paths.target + '**/*'], {force: true}, cb);
});
//define tasks
gulp.task('default', [ 'clean', 'less', 'js' , 'move', 'watch', 'browser-sync'], function () {
return util.log('Gulp is running!');
});
Solution 1:
Splitting up the bower-less-files plus overwrite and your custom styles. so that you have 2 less tasks.
Solution 2:
Keep anything in one Task and inject modifyVars into your less task
s = s.pipe(less({
modifyVars: {
"fa-font-path" : '"../custom/path/"',
...
}
}));
Having trouble understanding where I'm going wrong with this (if it's me at all), I've got my (first) gulp file, and it's working fine:
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var del = require('del');
var sourcemaps = require('gulp-sourcemaps');
var concat = require('gulp-concat');
var handlebars = require('gulp-handlebars');
var wrap = require('gulp-wrap');
var declare = require('gulp-declare');
gulp.task('default', ['clean', 'minify-external', 'minify-internal']);
gulp.task('clean', function() {
del(['build/js/'], function(err){ });
});
gulp.task('minify-external', function() {
return gulp.src([
'bower_components/jquery/dist/jquery.js',
'bower_components/handlebars/handlebars.js',
'bower_components/ember/ember.js',
'bower_components/ember-data/ember-data.js',
])
.pipe(sourcemaps.init())
.pipe(uglify())
.pipe(concat('scripts.min.js'))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('build/js/'));
});
gulp.task('minify-internal', function() {
return gulp.src('src/js/**/*.js')
.pipe(sourcemaps.init())
.pipe(uglify())
.pipe(concat('lib.min.js'))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('build/js//'));
});
gulp.watch('src/js/**/*.js', ['minify-internal']);
Next I'm trying to add the handlebars pre-compilation into it:
//above omitted for brevity
gulp.task('default', ['clean', 'minify-external', 'minify-internal']);
//...
gulp.task('templates', function() {
return gulp.src('src/templates/**/*.hbs')
.pipe(handlebars())
.pipe(wrap('Handlebars.template(<%= contents %>)'))
.pipe(declare({
namespace: 'Todos.templates',
noRedeclare: true, // Avoid duplicate declarations
}))
.pipe(concat('templates.min.js'))
.pipe(gulp.dest('build/js/'));
});
And the script now fails:
Error: EEXIST, mkdir '[BUILD PATH]/build/js'
Seems to be specific to the templates task, as the other two minify-x tasks run fine. I've attempted async and sync running (that is removing the return statements from tasks). Am I missing something on how streams interact here? Is it normal to output from multiple tasks to the same folder?
I having trouble trying to show the debug grid from susy 2.
base on this sample:
http://sassmeister.com/gist/9533822
I use
body
{
#include container(show);
}
but what Developer Tool Return is:
https://www.dropbox.com/s/pskhjvwd631jux6/Screenshot%202014-08-24%2015.31.37.png?dl=0
the SVG Grid is not there
I start thinking of my gulp Config:
// Include gulp
var gulp = require('gulp'),
// Include Our Plugins
sass = require('gulp-ruby-sass'),
compass = require('gulp-compass'),
prefix = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
rimraf = require('gulp-rimraf'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
plumber = require('gulp-plumber');
livereload = require('gulp-livereload');
//Sass
gulp.task('styles', function() {
return gulp.src('_scss/*.scss')
.pipe(plumber())
.pipe(compass({
// Compass settings that would otherwise go in config.rb
sass: '_scss',
css: 'resources/css',
image: 'resources/img',
//environment: 'production',
//environment: 'development',
style: 'expanded',
relative: true,
//noLineComments: true
require: ['susy', 'breakpoint']
}))
.pipe(prefix({ cascade: true }))
.pipe(gulp.dest('resources/css'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('resources/css'))
.pipe(notify({ message: 'Styles task complete' }));
});
// Concatenate & Minify JS
gulp.task('pluginsjs', function() {
return gulp.src(['_coffeescript/_plugins.js'])
.pipe(plumber())
.pipe(gulp.dest('resources/js'))
.pipe(rename({basename:'plugins', suffix: '.min'}))
.pipe(gulp.dest('resources/js'))
.pipe(notify({ message: 'Plugins javascript task complete' }));
});
gulp.task('mainjs', function() {
return gulp.src(['_coffeescript/_main.js'])
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(plumber())
.pipe(gulp.dest('resources/js'))
.pipe(rename({basename:'main',suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('resources/js'))
.pipe(notify({ message: 'Main javascript task complete' }));
});
// Optimize Images
gulp.task('images', function() {
return gulp.src('_img/**')
.pipe(plumber())
.pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
.pipe(gulp.dest('resources/img'))
.pipe(notify({ message: 'Images task complete' }));
});
//Clean everything
gulp.task('rimraf', function() {
return gulp.src(['resources/css', 'resources/js', 'resources/img'], {read: false})
.pipe(rimraf());
});
gulp.task('watch', function() {
// Watch .scss files
gulp.watch('_scss/*.scss', ['styles']);
// Watch .js files
gulp.watch('_coffeescript/*.js', ['pluginsjs','mainjs']);
// Watch image files
gulp.watch('_img/**', ['images']);
//Create LiveReload server
var server = livereload();
//Watch any files in dist/, reload on change
gulp.watch(['dist + /**']).on('change', function(file) {
server.changed(file.path);
});
});
gulp.task('default', ['rimraf'], function() {
gulp.start(['styles', 'pluginsjs', 'mainjs', 'images', 'watch']);
});
But I deactive imagemin or anything that could be affectig , and is the same always... :(
What could it be?
thanks
It looks like you have another image that is overriding the Susy background. Try using the overlay option:
body
{
#include container(show overlay);
}