I'm using underscore with sass to create a theme, and I'm using gulp as task runner.
The problem is that after wtaching nothing happens. I tried to perform a single task but once more time nothing. To be sure I performed js task javascript too
here the code:
var themename = 'mytheme';
var gulp = require('gulp'),
// Prepare and optimize code etc
autoprefixer = require('autoprefixer'),
browserSync = require('browser-sync').create(),
image = require('gulp-image'),
jshint = require('gulp-jshint'),
postcss = require('gulp-postcss'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
// Only work with new or updated files
newer = require('gulp-newer'),
// Name of working theme folder
root = '../' + themename + '/',
scss = root + 'sass/',
js = root + 'js/',
img = root + 'images/',
languages = root + 'languages/';
// CSS via Sass and Autoprefixer
gulp.task('css', function() {
return gulp.src(scss + '{style.scss,rtl.scss}')
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'expanded',
indentType: 'tab',
indentWidth: '1'
}).on('error', sass.logError))
.pipe(postcss([
autoprefixer('last 2 versions', '> 1%')
]))
.pipe(sourcemaps.write(scss + 'maps'))
.pipe(gulp.dest(root));
});
// Optimize images through gulp-image
gulp.task('images', function() {
return gulp.src(img + 'RAW/**/*.{jpg,JPG,png}')
.pipe(newer(img))
.pipe(image())
.pipe(gulp.dest(img));
});
// JavaScript
gulp.task('javascript', function() {
return gulp.src([js + '*.js'])
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(gulp.dest(js));
});
// Watch everything
gulp.task('watch', function() {
browserSync.init({
open: 'external',
proxy: 'localhost/mysite',
port: 8080
});
gulp.watch([root + '**/*.css', root + '**/*.scss' ], ['css']);
gulp.watch(js + '**/*.js', ['javascript']);
gulp.watch(img + 'RAW/**/*.{jpg,JPG,png}', ['images']);
gulp.watch(root + '**/*').on('change', browserSync.reload);
});
// Default task (runs at initiation: gulp --verbose)
gulp.task('default', ['watch']);
Related
Hope there is a kind sole that can help me.
I've been coding width gulpbrowsersync but it suddenly stopped working. i have note.js and npm installed and running locally width MAMP.
Gulp browsersync will not write code out automatically anymore.
The watch function works and it reloades in browser everytime i change the code in my header.scss file but no changes is written to my style.css file.
Here is my gulp file. Anyone know what could be wrong?
var themename = 'humescores';
var gulp = require('gulp'),
// Prepare and optimize code etc
autoprefixer = require('autoprefixer'),
browserSync = require('browser-sync').create(),
image = require('gulp-image'),
jshint = require('gulp-jshint'),
postcss = require('gulp-postcss'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
// Only work with new or updated files
newer = require('gulp-newer'),
// Name of working theme folder
root = '../' + themename + '/',
scss = root + 'sass/',
js = root + 'js/',
img = root + 'images/',
languages = root + 'languages/';
// CSS via Sass and Autoprefixer
gulp.task('css', function() {
return gulp.src(scss + '{style.scss,rtl.scss}')
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'expanded',
indentType: 'tab',
indentWidth: '1'
}).on('error', sass.logError))
.pipe(postcss([
autoprefixer('last 2 versions', '> 1%')
]))
.pipe(sourcemaps.write(scss + 'maps'))
.pipe(gulp.dest(root));
});
// Optimize images through gulp-image
gulp.task('images', function() {
return gulp.src(img + 'RAW/**/*.{jpg,JPG,png}')
.pipe(newer(img))
.pipe(image())
.pipe(gulp.dest(img));
});
// JavaScript
gulp.task('javascript', function() {
return gulp.src([js + '*.js'])
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(gulp.dest(js));
});
// Watch everything
gulp.task('watch', function() {
browserSync.init({
open: 'external',
proxy: 'http://localhost/wordpress/',
port: 8080
});
gulp.watch([root + '**/*.css', root + '**/*.scss' ], ['css']);
gulp.watch(js + '**/*.js', ['javascript']);
gulp.watch(img + 'RAW/**/*.{jpg,JPG,png}', ['images']);
gulp.watch(root + '**/*').on('change', browserSync.reload);
});
// Default task (runs at initiation: gulp --verbose)
gulp.task('default', ['watch']);
I had the same issue, but I managed to find a solution I commented this line in Gulpfile.js by adding forward slash like this
//sass = require('gulp-sass'),
Then add the following code in Gulpfile.js:
var themename = 'humescores';
var gulp = require('gulp'),
// Prepare and optimize code etc
autoprefixer = require('autoprefixer'),
browserSync = require('browser-sync').create(),
image = require('gulp-image'),
jshint = require('gulp-jshint'),
postcss = require('gulp-postcss'),
//sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
// Only work with new or updated files
newer = require('gulp-newer'),
// Name of working theme folder
root = '../' + themename + '/',
scss = root + 'sass/',
js = root + 'js/',
img = root + 'images/',
languages = root + 'languages/';
//----------------------------------------------------------------------------------------------------
// ADDED FROM ANOTHER GULPFILE.JS PROJECT AND INSERTED INTO THIS ONE----------
//----------------------------------------------------------------------------------------------------
gulp.task('sass', function() {
return gulp.src('assets/sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(autoprefixer({
browsers: ['last 2 version'],
cascade: false
}))
.pipe(sass({
outputStyle: 'uncompressed'
})
.on('error', sass.logError ))
.pipe(sourcemaps.write('/maps'))
.pipe(gulp.dest('./'))
.pipe(connect.reload());
});
//------------------------------------- END OF CODE -----------------------------------
// CSS via Sass and Autoprefixer
gulp.task('css', function() {
return gulp.src(scss + '{style.scss,rtl.scss}')
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'expanded',
indentType: 'tab',
indentWidth: '1'
}).on('error', sass.logError))
.pipe(postcss([
autoprefixer('last 2 versions', '> 1%')
]))
.pipe(sourcemaps.write(scss + 'maps'))
.pipe(gulp.dest(root));
});
// Optimize images through gulp-image
gulp.task('images', function() {
return gulp.src(img + 'RAW/**/*.{jpg,JPG,png}')
.pipe(newer(img))
.pipe(image())
.pipe(gulp.dest(img));
});
// JavaScript
gulp.task('javascript', function() {
return gulp.src([js + '*.js'])
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(gulp.dest(js));
});
// Watch everything
gulp.task('watch', function() {
browserSync.init({
open: 'external',
proxy: 'localhost/wp',
port: 8080
});
gulp.watch([root + '**/*.css', root + '**/*.scss' ], ['css']);
gulp.watch(js + '**/*.js', ['javascript']);
gulp.watch(img + 'RAW/**/*.{jpg,JPG,png}', ['images']);
gulp.watch(root + '**/*').on('change', browserSync.reload);
});
// Default task (runs at initiation: gulp --verbose)
gulp.task('default', ['watch']);
Then I configured the CSS Predecessor in NetBeans 8.1 which required to download Ruby on Rails, then install SASS by using Ruby on Rails in CLI.
Trying to get the css to update on the browser using browser sync via Gulp on Node.js... What am I doing wrong?
This is the Gulp.js file
var themename = 'playtest haha 1';
var gulp = require('gulp'),
// Prepare and optimize code etc
autoprefixer = require('autoprefixer'),
browserSync = require('browser-sync').create(),
image = require('gulp-image'),
jshint = require('gulp-jshint'),
postcss = require('gulp-postcss'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
// Only work with new or updated files
newer = require('gulp-newer'),
// Name of working theme folder
root = '../' + themename + '/',
scss = root + 'sass/',
js = root + 'js/',
img = root + 'images/',
languages = root + 'languages/';
// CSS via Sass and Autoprefixer
gulp.task('css', function() {
return gulp.src(scss + '{style.scss,rtl.scss}')
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'expanded',
indentType: 'tab',
indentWidth: '1'
}).on('error', sass.logError))
.pipe(postcss([
autoprefixer('last 2 versions', '> 1%')
]))
.pipe(sourcemaps.write(scss + 'maps'))
.pipe(gulp.dest(root));
});
// Optimize images through gulp-image
gulp.task('images', function() {
return gulp.src(img + 'RAW/**/*.{jpg,JPG,png}')
.pipe(newer(img))
.pipe(image())
.pipe(gulp.dest(img));
});
// JavaScript
gulp.task('javascript', function() {
return gulp.src([js + '*.js'])
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(gulp.dest(js));
});
// Watch everything
gulp.task('watch', function() {
browserSync.init({
open: 'external',
proxy: 'http://localhost/wordpress', /* add your local host so the task can since the browser thing a bob*/
port: 8080
});
gulp.watch([root + '**/*.css', root + '**/*.scss' ], ['css']);
gulp.watch(js + '**/*.js', ['javascript']);
gulp.watch(img + 'RAW/**/*.{jpg,JPG,png}', ['images']);
gulp.watch(root + '**/*').on('change', browserSync.reload);
});
// Default task (runs at initiation: gulp --verbose)
gulp.task('default', ['watch']);
I have using the "local server" link to view the website project on browser and the proxying :http://localhost (do I add the /wordpress path?)
Node.js terminal screen: https://imgur.com/a/9lUNi
Not sure why the css is not updating, the browser sync sign is shown on the browsers and seem to be in sync (tested with multiple browsers), the css is not updating?!
You need to pipe to browserSync at the end of your 'css' task ala:
// CSS via Sass and Autoprefixer
gulp.task('css', function() {
return gulp.src(scss + '{style.scss,rtl.scss}')
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'expanded',
indentType: 'tab',
indentWidth: '1'
}).on('error', sass.logError))
.pipe(postcss([
autoprefixer('last 2 versions', '> 1%')
]))
.pipe(sourcemaps.write(scss + 'maps'))
.pipe(gulp.dest(root))
.pipe(browserSync.reload({ stream:true }));
});
Your
gulp.watch(root + '**/*').on('change', browserSync.reload);
will probably run into lots of race conditions (as for instance running before the 'css' task finishes and running multiple times) and I would remove it and put the reload pipe at the end of your 'javascript' and 'images' tasks as well.
I just had a very frustrating couple of days battling css that refused to update and finally solved it by disabling caching in the Network tab of Chrome Developer Tools. Worked like a charm. I know this is an old question, but thought I'd add the suggestion here for people who find themselves in the same position in the future.
My gulp runs with no errors, but does not pick up any changes to the SASS. If I stop gulp and re-run, it compiles the sass fine. Here is my gulp file.
var gulp = require('gulp'),
gutil = require('gulp-util'),
browserify = require('gulp-browserify'),
concat = require('gulp-concat');
gulpif = require('gulp-if');
uglify = require('gulp-uglify');
bower = require('gulp-bower');
sass = require('gulp-sass');
imagemin = require('gulp-imagemin');
pngcrush = require('imagemin-pngcrush');
livereload = require('gulp-livereload');
// Create gulp plugins from node install
// npm install --save-dev gulp-**
var jsSources,
sassSources,
outputDir,
sassStyle
// Create variables for enviroments
env = process.env.NODE_ENV || 'development';
if (env==='development') {
outputDir = './';
sassStyle = 'expanded';
} else {
outputDir = './';
sassStyle = 'compressed';
}
// Conditions for development and production enviroments
jsSources = ['js/*.js'];
sassSources = ['scss/style.scss'];
imageSources = ['images/**/*.*'];
bowerDir = ['bower_components/'];
// Paths to files
gulp.task('js', function() {
gulp.src(jsSources)
.pipe(concat('scripts.js'))
.pipe(browserify())
.pipe(gulpif (env === 'production', uglify()))
.pipe(gulp.dest('./'))
});
// Concat all javascript files
gulp.task('images', function() {
gulp.src(imageSources)
.pipe(gulpif (env === 'production', imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngcrush()]
})))
.pipe(gulpif (env === 'production', gulp.dest(outputDir + 'images')))
});
// Compress all images
gulp.task('css', function() {
gulp.src(sassSources)
.on('error', function(error) {
console.log('Error: ' + error.message);
})
.pipe(sass({outputStyle: sassStyle})
.on('error', sass.logError)
)
.pipe(gulp.dest(outputDir));
});
gulp.task('watch', function() {
livereload.listen()
gulp.watch(jsSources, ['js']);
gulp.watch(imageSources, ['images']);
gulp.watch('scss/*.scss', ['css']);
});
// Watch task, looks for changes and automatically updates.
gulp.task('default', ['js', 'css', 'images', 'watch']);
// Runs all tasks
Can anyone see anything that would cause this issue for me?
when running gulp watch it appears that its watching as the file changes. However it appears that its writting the .css file to the same folder where I am making the changes. Here is my Gulp File. I want it to put the .min.css and the .css file inside root/www/css The folder where my scss is located in /root/scss I want to be able to edit it here but have it compile and put the .css and min.css inside /root/www/css It looks looks like thats what it should be doing with these items:
.pipe(gulp.dest('./www/css/'))
.pipe(minifyCss({
But its just creating a .css file only and its in the same folder the .scss is at.
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({
errLogToConsole: true
}))
.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();
});
Sometimes when I add the ./ to the destinations Gulp tries to make a new directory. Taking that off usually fixes it.
gulp.task('sass', function(done) {
gulp.src('./scss/ionic.app.scss')
.pipe(sass({
errLogToConsole: true
}))
.pipe(gulp.dest('www/css/'))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('www/css/'))
.on('end', done);
});
Im using the gulp smoosher to inject content from a CSS file inline into a copy of my index.html file.
This is working fine upon gulp init, however when running I cant get the task to trigger / generate any updates from updating my CSS file.
I'm currently trying with the following:
var gulp = require('gulp');
var autoprefix = require('gulp-autoprefixer');
var smoosher = require('gulp-smoosher');
var cssDir = 'assets/src/css';
var cssTargetDir = 'assets/build/css';
var htmlSrcDir = 'assets/src';
gulp.task('css', function() {
gulp.src(cssDir + '/**/*.css')
.pipe(autoprefix({
browsers: ['last 40 versions'],
cascade: false
}))
.pipe(gulp.dest(cssTargetDir));
});
gulp.task('smoosher', ['css'], function () {
gulp.src(htmlSrcDir + '/index.html')
.pipe(smoosher({
base: 'assets/build/' //target and inject from build CSS
}))
.pipe(gulp.dest('')); //root
});
gulp.task('watch', function(){
gulp.watch(cssDir + '/*.css', ['css']);
gulp.watch(htmlSrcDir + '/index.html', ['smoosher']);
})
gulp.task('default', [
'css',
'smoosher',
'watch'
]);
you should change the watch for smoosher to watch for css files and not for index.html
Remember to watch for the source of the change and not the end result
gulp.task('watch', function(){
gulp.watch(cssDir + '/*.css', ['css']);
gulp.watch(cssDir + '/*.css', ['smoosher']);
})