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.
Related
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']);
Given this gulpfile.js:
var gulp = require("gulp"),
sass = require("gulp-sass"),
sourcemaps = require("gulp-sourcemaps"),
autoprefixer = require("gulp-autoprefixer"),
input = "./sass/*.scss",
output = "./assets/style.css";
gulp.task("sass", function() {
return gulp
.src(sassInput)
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on("error", sass.logError))
.pipe(sourcemaps.write())
.pipe(autoprefixer())
.pipe(gulp.dest(output))
.resume();
});
gulp.task("watch", function() {
return (gulp
//watch input folder for change and then run 'sass' task
.watch(input, ["sass"])
.on("change", function(e) {
console.log(
"file" + e.path + " was " + e.type + ", running tasks..."
);
}) );
});
I'm getting the following error --
Error: EEXIST: file already exists, mkdir './assets/style.css'
From what I've found around the web, it seems like gulp is treating the 'style.css' portion of that output folder as a directory itself, or something weird like that, but I can't really figure it out.
There is a tool called gulp-rename built specifically for this purpose. Here's the snippet that I added to make it work properly after adding the npm package.
var gulp = require("gulp");
.
.
.
var rename = require("gulp-rename")
input = "./sass/*.scss",
output = "./assets/";
gulp.task("sass", function() {
return gulp
.src(sassInput)
.
.
.
.pipe(rename("styles.css.liquid"))
.resume();
});
I am trying to setup sass in my laravel project, I have made a folder resources/assets/sass, installed npm modules, but nothing gets copied to public/css folder so when I open my page I get the error in the console:
Failed to load resource: the server responded with a status of 404
(Not Found)
And when I run gulp it opens up in the browser the folder structure of public folder.
How exactly should I set it up?
This is my gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var include = require('gulp-include');
var watch = require('gulp-watch');
var batch = require('gulp-batch');
var sourcemaps = require('gulp-sourcemaps');
var prefix = require('gulp-autoprefixer');
var connect = require('gulp-connect');
var browserify = require('gulp-browserify');
var livereload = require('gulp-livereload');
var browsersync = require('browser-sync');
var config = {
port: 1338,
srcDir: './src',
destDir: './public',
content: {
src: '/**/*.html'
},
styles: {
src: '/scss/app.scss',
dest: '/css',
includePaths: [
'node_modules/foundation-sites/scss',
'node_modules/motion-ui/src'
],
prefix: ["last 2 versions", "> 1%", "ie 9"]
},
scripts: {
src: '/js/app.js',
dest: '/js'
},
img: {
src: '/img/**/*',
dest: '/img'
}
};
var srcDir = './src',
destDir = './build';
gulp.task('styles', function() {
return gulp.src(config.srcDir + config.styles.src)
.pipe(sourcemaps.init())
.pipe(sass({
includePaths: config.styles.includePaths,
sourceMap: true,
outFile: config.destDir + config.styles.dest + '/app.css',
outputStyle: 'compressed'
}))
.pipe(prefix(config.styles.prefix))
.pipe(sourcemaps.write())
.on('error', sass.logError)
.pipe(gulp.dest(config.destDir + config.styles.dest))
.pipe(browsersync.reload({ stream: true }));
});
gulp.task('scripts', function() {
gulp.src(config.srcDir + config.scripts.src)
.pipe(browserify({
insertGlobals : true,
debug : !gulp.env.production
}))
.pipe(gulp.dest(config.destDir + config.scripts.dest))
});
gulp.task('include', function() {
gulp.src(config.srcDir + config.content.src)
.pipe(include())
.on('error', console.log)
.pipe(gulp.dest(config.destDir));
return gulp.src(config.srcDir + config.img.src)
.pipe(gulp.dest(config.destDir + config.img.dest));
});
gulp.task('webserver', function() {
connect.server({
root: [config.destDir],
port: config.port
});
});
gulp.task('browsersync', function() {
browsersync({
port: config.port,
proxy: 'localhost:' + config.port
});
});
gulp.task('watch', ['browsersync'], function () {
watch(config.srcDir + '/**/*.*', batch(function (events, done) {
gulp.start('include', done);
gulp.start('styles', done);
gulp.start('scripts', done);
}));
});
gulp.task('default', ['styles', 'scripts', 'include', 'webserver', 'watch']);
Have you run the command 'npm install'?
I have this Gulp task in my 'gulpfile.js' which utilises the gulp-ruby-sass plugin. When I run it, it tasks at least 8 seconds to compile. The equivalent script in Grunt can take less than 1 second so I am confused as to what is causing the lag.
'use strict';
var gulp = require('gulp');
var minifyCSS = require('gulp-minify-css');
// Load plugins
var plugins = require('gulp-load-plugins')();
var path = {
src: function (path) {
return './assets/' + path;
},
dist: function (path) {
return './web/' + path;
},
};
// Styles
gulp.task('styles', function () {
return gulp.src(path.src('styles/**/*.scss'))
.pipe(plugins.rubySass({sourcemap: false, style: 'expanded', quiet: true }))
.pipe(plugins.autoprefixer('last 2 versions', '> 1%', 'ie 8'))
.pipe(gulp.dest(path.src('styles')))
.pipe(minifyCSS())
.pipe(plugins.rename({suffix: '.min'}))
.pipe(gulp.dest(path.dist('styles')))
.pipe(plugins.size());
});
I swapped out gulp-ruby-sass for gulp-sass and I can now compile in under a second. Marvellous!
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