I have a wordpress installation and creating a theme based on a lynda.com tutorial (WordPress: Building Themes from Scratch Using Underscores).
I installed gulp and all the needed stuff to work with scss but the problem is sometimes, changes don't save!
http://prntscr.com/o60i1a
the file is changed and watch is starting but the scss file is not updating.
The problem is sometimes it works when I close cmd or browser!
I read in another question here that you need to add this to sublime:
"atomic_save" : true
I did it, and it worked so changes are now saving okay (I was happy) but this mourning it's not saving again : (
Gulpfile.js:
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/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']);
Related
I have a project using Gulp and SASS and when I run gulp watch it runs the first change successfully without any issues.
The problem occurs when I make any further changes - they seem to not register and are seemingly ignored.
Here is my Gulpfile.js code:
var theme_name = 'project-theme';
var gulp = require('gulp'),
cleanCSS = require('gulp-clean-css'),
sass = require('gulp-sass'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename');
var paths = {
styles: {
src: 'wp-content/themes/' + theme_name + '/gulp/sass/theme.scss',
folder: 'wp-content/themes/' + theme_name + '/gulp/sass/*.scss',
dest: 'wp-content/themes/' + theme_name + '/assets/css/'
},
scripts: {
src: 'wp-content/themes/' + theme_name + '/gulp/jquery/*.js',
dest: 'wp-content/themes/' + theme_name + '/assets/js/'
}
};
gulp.task('styles', function() {
return gulp
.src(paths.styles.src, {
sourcemaps: true
})
.pipe(sass())
.pipe(cleanCSS())
.pipe(rename({
basename: 'main',
suffix: '.min'
}))
.pipe(gulp.dest(paths.styles.dest));
});
gulp.task('scripts', function() {
return gulp
.src(paths.scripts.src, {
sourcemaps: true
})
.pipe(uglify())
.pipe(concat('main.min.js'))
.pipe(gulp.dest(paths.scripts.dest));
});
gulp.task('watch', function() {
gulp.watch(paths.scripts.src, gulp.series('scripts'));
gulp.watch(paths.styles.folder, gulp.series('styles'));
});
gulp.task('default', gulp.parallel('styles', 'scripts', 'watch'));
I've looked at other similar questions on Stack Overflow and they've not provided me with any success. Any help will be appreciated.
I've found a solution. What I now understand is that Gulp does not know that the task is finished, therefore ignoring all further changes.
In order to fix this I changed Line 48 & 49 to this:
gulp.watch(paths.styles.folder).on('change',gulp.series('styles'));
gulp.watch(paths.scripts.src).on('change', gulp.series('scripts'));
All additional changes are now registered by gulp watch.
Hope this helps anyone with a similar issue.
I'm trying to add Bootstrap with SASS capability to my ASP.NET Core 2 project, but have difficulty accomplishing this. I used NPM to install Bootstrap into node_modules, then got Gulp to move minified css and js dependencies into my wwwroot directory. Now I want to have a SASS file where I override Bootstrap's defaults to fit my needs, and this is where I'm stuck. Here's my Gulp code, 'compile-sass' is not working. I get missing binding error.
const gulp = require('gulp');
const concat = require('gulp-concat');
const sass = require('gulp-sass');
const root = "./wwwroot/";
const bootstrapStyles = "node_modules/bootstrap/dist/css/bootstrap.min.css";
const bootstrapSass = "node_modules/bootstrap/scss/bootstrap.scss";
const bootstrapScripts = [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
];
gulp.task('default', ['build-all']);
gulp.task('build-all', ['build-css', 'build-js']);
gulp.task('build-css', () => {
return gulp.src(bootstrapStyles)
.pipe(gulp.dest('./wwwroot/'));
});
gulp.task('build-js', () => {
return gulp.src(bootstrapScripts)
.pipe(concat('bootstrap.min.js'))
.pipe(gulp.dest(root));
});
gulp.task('compile-sass', () => {
gulp.src(bootstrapSass)
.pipe(sass())
.pipe(gulp.dest(root));
});
// watch bootstrap-overrides.scss for changes and recompile SASS
gulp.task('watch-sass', () => {
gulp.watch(root + 'bootstrap-overrides.scss', ['compile-sass']);
});
This is the exact excerpt of the problem:
gulp.task('compile-sass', () => {
gulp.src(bootstrapSass)
.pipe(sass())
.pipe(gulp.dest(root));
});
Edit: Solved the build error by running the following command: npm rebuild node-sass
My bootstrap-overrides.scss edits are not changing variable values. How do I correctly compile SASS?
Solved it.
const gulp = require('gulp');
const concat = require('gulp-concat');
const sass = require('gulp-sass');
const rename = require('gulp-rename');
const root = "./wwwroot/";
const vendorScripts = [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
];
const vendorStyles = "node_modules/bootstrap/scss/bootstrap.scss";
const customerStyleOverrides = root + "scss/*.scss";
gulp.task('default', ['build-vendor']);
gulp.task('build-vendor', ['build-vendor-css', 'build-vendor-js']);
// merge javascripts into a single vendor.min.js file and save it to wwwroot
gulp.task('build-vendor-js', () => {
return gulp.src(vendorScripts)
.pipe(concat('vendor.min.js'))
.pipe(gulp.dest(root));
});
// compile bootstrap and save as vendor.min.css to wwwroot
gulp.task('build-vendor-css', () => {
return gulp.src([vendorStyles, customerStyleOverrides])
.pipe(sass({ outputStyle: 'compressed' }))
.pipe(rename('vendor.min.css'))
.pipe(gulp.dest(root));
});
// watch for changes to styles.css and recompile bootstrap on styles change
gulp.task('watch-sass', () => {
gulp.watch(root + "scss/styles.scss", ['build-vendor-css']);
});
I want to have a watch task that reloads the browser. Below watch works fine for sass compilation but the browser doesn't reload - thoughts?
// Gulp Packages
var gulp = require('gulp'),
gutil = require('gulp-util'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
browserSync = require('browser-sync').create(),
reload = browserSync.reload;
// Default Task
gulp.task('default', ['copyFiles','styles']);
// Copy Files
gulp.task('copyFiles', function() {
gulp.src('./source/*.php').pipe(gulp.dest('./public'));
});
// Compile SASS
var sassOptions = {
errLogToConsole: true,
outputStyle: 'compressed'
};
gulp.task('styles', function() {
gulp.src('./scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./css/'));
});
// Watch Task
gulp.task('watch', function() {
gulp.watch('./scss/includes/**/*.scss', ['styles']);
gulp.watch('./scss/includes/**/*.scss').on('change', browserSync.reload);
});
I would suggest a configuration similar to:
// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {
browserSync.init({
server: "./app"
});
gulp.watch("app/scss/*.scss", ['sass']);
gulp.watch("app/*.html").on('change', browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src("app/scss/*.scss")
.pipe(sass())
.pipe(gulp.dest("app/css"))
.pipe(browserSync.stream());
});
gulp.task('default', ['serve']);
Source: https://www.browsersync.io/docs/gulp
You need to initialise a Server and watch changes to your SASS and HTML. Then in your sass compile task you need to add .pipe(browserSync.stream()); after the dest command so browserSync can pick up your newly compiled SASS and serve it.
Finally you need to call your serve task with your default task.
Also you can take a look here https://scotch.io/tutorials/how-to-use-browsersync-for-faster-development#using-browsersync-and-sass for another example of Browsersync + Gulp + SASS.
My goal is to watch all my scss files
with the code below all it's ok if my
config.paths.src.styles is set like
/styles/app.scss
but when I change it to
/styles/*.scss
I've got like
Error: _theme.scss:13:20: Missing property value
The problem come out when
I use #extend .container;
not normal css.
Gulp task
style.js
var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var gulpif = require('gulp-if');
var rename = require('gulp-rename');
var csso = require('gulp-csso');
var autoprefixer = require('gulp-autoprefixer');
var sass = require('gulp-ruby-sass');
function handleError(err) {
console.log(err.toString());
this.emit('end');
}
var sassOptions = { // The options to be passed to sass()
style: 'expanded',
'sourcemap=none': true
};
//https://github.com/jgoux/generator-angulpify/issues/19
module.exports = gulp.task('styles', function () {
return gulp.src(config.paths.src.styles)
.pipe(autoprefixer('last 1 version'))
.pipe(gulpif(release, csso()))
.pipe(gulpif(release, sass(sassOptions).on('error', handleError), sass(sassOptions).on('error', handleError)))
.pipe(rename(config.filenames.styles))
.pipe(gulpif(release, gulp.dest(config.paths.dest.phonegap.styles), gulp.dest(config.paths.dest.build.styles) ))
.pipe(gulpif(!release,reload({stream:true})));
});
watch.js
'use strict';
var gulp = require('gulp');
module.exports = gulp.task('watch', function() {
var stylesWatcher = gulp.watch(config.paths.src.styles, ['styles']);
stylesWatcher.on('change', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks styles');
});
});
app.scss
#import "variables";
#import "imports";
#import "theme";
_theme.js
.morra-sub-header{
#include clearfix;
#extend .container;
}
You can give a look at the whole gulp set up
https://github.com/whisher/angular-bootstrap-cordova-seed/tree/master/gulp
END UP
You should use app.scss in the style task
and *.scss in the watch task (silly me :) )
mainStyles: SRC_FOLDER + '/styles/app.scss',
styles: SRC_FOLDER + '/styles/*.scss',
module.exports = gulp.task('styles', function () {
return gulp.src(config.paths.src.mainStyles)
.pipe(autoprefixer('last 1 version'))
.pipe(gulpif(release, csso()))
.pipe(gulpif(release, sass(sassOptions).on('error', handleError), sass(sassOptions).on('error', handleError)))
.pipe(rename(config.filenames.styles))
.pipe(gulpif(release, gulp.dest(config.paths.dest.phonegap.styles), gulp.dest(config.paths.dest.build.styles) ))
.pipe(gulpif(!release,reload({stream:true})));
});
module.exports = gulp.task('watch', function() {
var stylesWatcher = gulp.watch(config.paths.src.styles, ['styles']);
stylesWatcher.on('change', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks styles');
});
});
The issue here is that your *.scss glob takes everything with no special order. So the _theme.scss file could be picked first, and because it's using variables from the _imports.scss one that's not processed yet, you've got the error.
To prevent this, you could use an array specific pattern to specifically load _imports.scss first.
config.paths.src.styles = [
'_imports.scss',
'*.scss'
];
Even though I don't know why you want to also pipe your partials, the imports from the app.scss should be good.
I'm having a strange problem with Gulp. Here is my Gulp file:
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var notify = require('gulp-notify');
var sass = require('gulp-ruby-sass');
gulp.task('default', function() {
gulp.run('main');
gulp.watch('sass/*.scss', function() {
gulp.run('main');
})
});
gulp.task('main', function() {
return gulp.src('sass/**/*.scss')
.pipe(sass())
.on('error', notify.onError(function(error) { return 'Error: ' + error.message; }))
// .pipe(autoprefixer('last 10 version'))
.pipe(gulp.dest('./css'))
.pipe(notify({ message: 'Your SASS has been auto-prefixed and minified.'}))
;
});
The script runs correctly the first time. But on second and subsequent runs of the same script (without Gulp having stopped running), it puts it in the SASS directory as a subitem of the .SCSS file. Any idea why this is happening. I'm not sure how to even debug.
Try the following code.
It uses the correct syntax for gulp, replacing gulp.run() with the supported function arguments.
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var notify = require('gulp-notify');
var sass = require('gulp-ruby-sass');
gulp.task('main', function() {
return gulp.src('./sass/**/*.scss')
.pipe(sass())
.on('error', notify.onError(function(error) { return 'Error: ' + error.message; }))
.pipe(gulp.dest('./css'))
.pipe(notify({ message: 'Your SASS has been auto-prefixed and minified.'}));
});
gulp.watch('sass/*.scss', ['main']);
gulp.task('default', ['main']);
Found the answer, the gulp.dest keeps the folder structure of gulp.src, to override you can set the base property of the src, this will exclude whatever folder the base is set to
example gulp.src('./sass/' + '**/*.scss', {base: 'sass'}) this now excludes sass from the destination, no longer appending sass to your gulp.dest
See and this look at gulp.src