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!
Related
Based on the gulb file of foundation 6.4 I compile my sass files.
The goal is to compile the app.css and a backend.css and a rte.css
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var autoprefixer = require('autoprefixer');
var sassPaths = [
'node_modules/foundation-sites/scss',
'node_modules/motion-ui/src'
];
function sass() {
return gulp.src('scss/app.scss')
.pipe($.sass({
includePaths: sassPaths
}).pipe(gulp.dest('css'));
};
function rte() {
return gulp.src('scss/Rte.Default.scss')
.pipe($.sass({
includePaths: sassPaths
}).pipe(gulp.dest('css'));
};
function backend() {
console.log('Backend\n');
return gulp.src('scss/Custom.Backend.scss')
.pipe($.sass({
includePaths: sassPaths
})
.pipe(gulp.dest('css'));
};
function serve() {
gulp.watch("scss/**/*.scss", sass);
};
// define the tasks
gulp.task('sass', sass);
gulp.task('rte', rte);
gulp.task('backend', backend);
gulp.task('serve', serve);
gulp.task('default', gulp.series([sass, rte, backend, serve]));
unfortunately I can compile app, rte, backend each on its own (commenting out the other tasks), but I can't compile all of them an once.
I only get "app.css", but not the other files.
I am a little bit lost in the gulp/references, tryed certain "similar" scripts/hints/tips - but I atways fail.
Do you know? I am sure you do!
Thank you for any help!
Here is an issue with this code:
function sass() {
return gulp.src('scss/app.scss')
.pipe($.sass({
includePaths: sassPaths
}).pipe(gulp.dest('css')); // problem here
};
It is a little obscured because of your style but you are missing a )
})).pipe(gulp.dest('css')); // correct
and same in other tasks.
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 got problems with gulp on the command-line when running tasks with dependencies (in-sequence and parallel). This might be specific to my environment, I need help were to look or how to make it any more verbose.
What happens:
I run gulp bundle
It starts:
Starting 'build'
Starting 'unbundle'
Finished 'unbundle' after 11ms
Starting 'clean'
Then I am back on my command prompt. No error message, the exit code was even 0.
Then I run it again: gulp bundle
Starting 'build'
Starting 'unbundle'
Finished 'unbundle'
Starting 'clean'
Finished 'clean'
Starting 'build-system'
Starting 'build-html'
Starting 'build-css'
Starting 'build-style'
Starting 'build-locales'
Finished 'build-css'
Finished 'build-locales'
Finished 'build-style'
Finished 'build-html'
Finished 'build-system'
Finished 'build'
Starting 'bundle'
Finished 'bundle'
This time it worked. We I want to do gulp bundle again I have to run it twice again.
There are other tasks which involve even more dependencies where I must enter the same command 4x before it works.
Everytime exit code 0. Even with flag -LLLL I do not get anything out of it. Gulp version is 3.9.1.
I have collected all affected tasks from the different files and combined their requires.
var gulp = require('gulp');
var runSequence = require('run-sequence');
var changed = require('gulp-changed');
var plumber = require('gulp-plumber');
var sourcemaps = require('gulp-sourcemaps');
var paths = require('../paths');
var assign = Object.assign || require('object.assign');
var notify = require('gulp-notify');
var typescript = require('gulp-tsb');
var exec = require('child_process').exec;
var print = require('gulp-print');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var vinylPaths = require('vinyl-paths');
var del = require('del');
var bundler = require('aurelia-bundler');
var bundles = require('../bundles.js');
var sassOptions = {
outputStyle: 'expanded'
};
var autoPrefixerOptions = {
browsers: ['last 2 versions', '> 1%']
};
var typescriptCompiler = typescriptCompiler || null;
gulp.task('build-system', function() {
if(!typescriptCompiler) {
typescriptCompiler = typescript.create(require('../../tsconfig.json').compilerOptions);
}
return gulp.src(paths.dtsSrc.concat(paths.source))
.pipe(plumber())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(typescriptCompiler())
.pipe(sourcemaps.write('.', {includeContent: false, sourceRoot: '/src'}))
.pipe(gulp.dest(paths.output));
});
gulp.task('build-html', function() {
return gulp.src(paths.html)
.pipe(changed(paths.output, {extension: '.html'}))
.pipe(gulp.dest(paths.output));
});
gulp.task('build-css', function() {
return gulp.src(paths.css)
.pipe(changed(paths.output, {extension: '.css'}))
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(autoprefixer())
.pipe(gulp.dest(paths.output));
});
gulp.task('build-style', function () {
return gulp.src(paths.style)
.pipe(changed(paths.outputStyle, { extension: '.css' }))
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(autoprefixer())
.pipe(gulp.dest(paths.outputStyle));
});
gulp.task('build-locales', function () {
return gulp.src(paths.locales)
.pipe(changed(paths.output, { extension: '.json' }))
.pipe(gulp.dest(paths.output));
});
gulp.task('build', function(callback) {
return runSequence(
'clean',
['build-system', 'build-html', 'build-css', 'build-style', 'build-locales'],
callback
);
});
gulp.task('clean', ['unbundle'], function() {
return gulp.src([paths.output])
.pipe(vinylPaths(del));
});
var config = {
force: true,
baseURL: './wwwroot',
configPath: './wwwroot/config.js',
bundles: bundles.bundles
};
gulp.task('bundle', ['build'], function() {
return bundler.bundle(config);
});
gulp.task('unbundle', function() {
return bundler.unbundle(config);
});
Every task returns a gulp pipe, a Promise of call the callback method.
I have no idea why this happens and why calling gulp multiple times solves the problem once (and then you must call it multiple times again).
To have the question documented with its answer:
The problem was a breakage in the pipe model with the clean task.
I solved it using another approach, here simply calling del which returns a Promise (which is returned).
gulp.task('clean', ['unbundle'], function() {
return del([paths.output]);
});
I'm setup as outlined below. The good news: styles are being compiled, the bad news: gulp doesn't seem to watch the scss files for a change and compile automatically?
// Include gulp
var gulp = require('gulp');
// Plugins
var concat = require('gulp-concat');
var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');
var include = require('gulp-include');
var sass = require('gulp-sass');
var minifycss = require('gulp-minify-css');
// Styles
gulp.task('styles', function() {
gulp.src('./_themes/blanktheme/ui/scss/styles.scss')
.pipe(include())
.pipe(sass({
errLogToConsole: true
}))
.pipe(minifycss())
.pipe(gulp.dest('./_themes/blanktheme/ui/css/'))
});
// Watch
gulp.task('default', ['watch'], function() {
gulp.watch('./_themes/blanktheme/ui/scss/*.scss', ['styles']);
});
gulp.task('default', ['styles', 'watch']);
I think this come from the fact you have two tasks default. I guess gulp ignore the first one (with gulp.watch) to only trigger the second one. Then you have dependencies with watch but seems like watch does not exist ?
You can install gulp-watch locally, and include it in your file. Give a look at gulp-watch documentation it might help.
Try this :D
var watch = require('gulp-watch');
// Styles
gulp.task('styles', function() {
gulp.src('./_themes/blanktheme/ui/scss/styles.scss')
.pipe(include())
.pipe(sass({
errLogToConsole: true
}))
.pipe(minifycss())
.pipe(gulp.dest('./_themes/blanktheme/ui/css/'))
});
// Watch
gulp.task('watch', function() {
watch('./_themes/blanktheme/ui/scss/*.scss', function () {
gulp.start('styles');
});
});
gulp.task('default', ['styles', 'watch']);
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