I've just started using gulp for the first time, required all the plugins I want to use and written the first task for sass compilation. It seems to work but there are two problems, firstly when I type gulp on the command line it seems to take 3 or 4 seconds to start which seems slower than grunt (I started using gulp because I understood it was faster). Is this normal?
The main problem though is that I have a default task which calls the sass task. The command line output seems to suggest that both are being run which means the sass is being compiled twice. It is also outputting my single gulp-notify notification twice which doesn't seem right.
Here is the command line output...
λ gulp default
[00:53:40] Using gulpfile ~\Desktop\jon\gulpfile.js
[00:53:40] Starting 'sass'...
[00:53:40] Finished 'sass' after 10 ms
[00:53:40] Starting 'default'...
[00:53:40] Finished 'default' after 7.93 μs
[00:53:41] gulp-notify: [Gulp notification] Css created
[00:53:41] gulp-notify: [Gulp notification] Css created
And here is my gulp file in full...
var gulp = require('gulp'),
gutil = require('gulp-util'),
compass = require('gulp-compass'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify'),
watch = require('gulp-watch'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
jshint = require('gulp-jshint'),
autoprefixer = require('gulp-autoprefixer'),
minifyCSS = require('gulp-minify-css'),
traceur = require('gulp-traceur'),
svgmin = require('gulp-svgmin'),
imagemin = require('gulp-imagemin'),
ngAnnotate = require('gulp-ng-annotate'),
expect = require('gulp-expect-file'),
sourcemaps = require('gulp-sourcemaps');
var paths = {
src: "src",
css: "stylesheets",
img: "images",
js: "js"
}
// Compile Our Sass
gulp.task('sass', function() {
gulp.src(paths.src + '/sass/*.scss')
.pipe(sourcemaps.init())
.pipe(compass({
sass: 'src/sass',
environment: 'development',
outputStyle: 'expanded',
debugInfo: false,
noLineComments: true
}))
.pipe(autoprefixer('> 5%', 'last 2 version', 'ie 9'))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(paths.css))
.pipe(notify({ message: 'Css created' }));
});
// Dev Task
gulp.task('default', ['sass']);
Anybody know what's going on here? Have I misunderstood how Gulp tasks work?
Use the onLast option of gulp-notify if you only want a single notification per-stream:
//...
.pipe(notify({message: 'Css created', onLast: true}));
Related
I am having a similar issue as the question posted here but none of the answers given there apply to my situation.
When I run the one and only task defined in my Gulpfile.js file it is getting executed twice.
I am using Gulp version 4.0.2
This is the contents of my Gulpfile.js file:
const { src, dest, watch, series, parallel } = require('gulp');
const sass = require('gulp-sass');
const rename = require('gulp-rename');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const files = {
bootstrapSrcPath: 'bootstrap-sass/bootstrap.scss',
bootstrapDstPath: 'Test'
};
exports.scssTask = series(
scssTaskFunc
);
function scssTaskFunc() {
return src(files.bootstrapSrcPath)
.pipe(sass({ style: 'expanded' }))
.pipe(dest(files.bootstrapDstPath))
.pipe(postcss([autoprefixer(), cssnano()]))
.pipe(rename({ suffix: '.min' }))
.pipe(dest(files.bootstrapDstPath));
}
This is the command I am running in the CMD prompt and the results:
C:\Users\myUser\source\repos\myProject> cmd.exe / c gulp - b "C:\Users\myUser\source\repos\myProject" --color--gulpfile "C:\Users\myUser\source\repos\myProject\Gulpfile.js" scssTask
[16: 10: 15]Using gulpfile ~\source\repos\myProject\Gulpfile.js
[16: 10: 15]Starting 'scssTask'...
[16: 10: 15] Starting 'scssTaskFunc'...
[16: 10: 17] Finished 'scssTaskFunc' after 1.7 s
[16: 10: 17]Finished 'scssTask' after 1.71 s
Process terminated with code 0.
It works and the output file is what I expect but it seems like a waste to do it twice.
This is the what gulp shows for tasks:
C:\Users\myUser\source\repos\myProject> gulp--tasks
[15: 57: 29]Tasks for ~\source\repos\myProject\Gulpfile.js
[15: 57: 29]└─┬ scssTask
[15: 57: 29]└─┬ <series>
[15:57:29] └── scssTaskFunc
Why is it running the task twice, once as the 'scssTask' and the second as the 'scssTaskFunc'?
Btw, this is my first attempt at gulp so I apologize if this is a derp question.
Your task isn't running twice, it just seems like it does because you're using gulp.series.
gulp.series and gulp.parallel are normally used to combine and compose tasks into larger operations. If, for example, you'd have a jsTaskFunc as well, you could create a task build like so:
exports.build = parallel(scssTaskFunc, jsTaskFunc);
and running gulp build would log something like this in your terminal:
[09:42:12] Starting 'build'...
[09:42:12] Starting 'scssTaskFunc'...
[09:42:12] Starting 'jsTaskFunc'...
[09:42:12] Finished 'scssTaskFunc' after 93 ms
[09:42:12] Finished 'jsTaskFunc' after 94 ms
[09:42:12] Finished 'build' after 111 ms
Something similar is happening now due to your use of gulp.series, because scssTask runs scssTaskFunc as a dependent task, but scssTask and scssTaskFunc are strictly speaking not the same task. Nothing gets run twice.
To avoid confusion, and because gulp.series isn't necessary, simply do:
exports.scssTask = scssTaskFunc;
After migrating gulp to gulp 4, terminal continuously outputs "Starting" and "Finished" after a single change\save to a scss file. Is this normal? The script is doing it's job, but the infinite output does not seem right. My script is small, so maybe someone sees something that I do not. My site is running on localhost IIS 7.5 website with bindings set to IP address.
Help is much appreciated. Thanks!
The only gulp migration added is gulp.series('css')
var sitename = 'mysitename';
var gulp = require('gulp'),
autoprefixer = require('autoprefixer'),
browserSync = require('browser-sync').create(),
postcss = require('gulp-postcss'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
newer = require('gulp-newer'),
// Name of working theme folder
root = '../' + sitename + '/',
scss = root + 'sass/';
// CSS via Sass and Autoprefixer
gulp.task('css', function() {
return gulp.src(scss + '{style.scss,rtl.scss}')
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'compressed',
indentType: 'tab',
indentWidth: '1'
}).on('error', sass.logError))
.pipe(postcss([
autoprefixer('last 2 versions', '> 1%')
]))
.pipe(sourcemaps.write(scss + 'maps'))
.pipe(gulp.dest(root + '/dist/css/'))
//.pipe(browserSync.stream());
});
// Watch everything
gulp.task('watch', function() {
browserSync.init({
open: 'external',
host: 'example.com',
proxy: 'example.com',
port: 80
});
gulp.watch([root + '**/*.css', root + '**/*.scss' ], gulp.series('css') );
gulp.watch(root + '**/*').on('change', browserSync.reload);
});
gulp.task('default', gulp.series('watch') );
If my style.scss file is saved, terminal output continues infinitely...
C:\Workspace\mysite\gulp-dev>gulp
[12:00:37] Using gulpfile
C:\Workspace\mysite\gulp-dev\gulpfile.js
[12:00:37] Starting 'default'...
[12:00:37] Starting 'watch'...
[Browsersync] Proxying: http://example.com
[Browsersync] Access URLs:
-----------------------------------
Local: http://localhost:81
External: http://example.com:81
-----------------------------------
UI: http://localhost:3001
UI External: http://example.com:3001
-----------------------------------
[12:00:48] Starting 'css'...
[12:00:48] Finished 'css' after 117 ms
[12:00:48] Starting 'css'...
[12:00:48] Finished 'css' after 32 ms
[12:00:48] Starting 'css'...
[12:00:48] Finished 'css' after 55 ms
[12:00:48] Starting 'css'...
[12:00:48] Finished 'css' after 63 ms
[12:00:49] Starting 'css'...
[12:00:49] Finished 'css' after 26 ms
It is occurring because you are watching the folder you are outputting the css to:
gulp.watch([root + '**/*.css'
.pipe(gulp.dest(root + '/dist/css/')
If a "globstar" [the **] is alone in a path portion, then it matches zero or
more directories and subdirectories searching for matches.
"And subdirectories" is the part that is catching you. So your "root/**/.css" includes "root/dist/css". Everytime the 'css' task is riggered it writes to the folder you are watching again, so the task gets retriggered...etc. This is why you don't usually watch your entire root, just wherever the src is located and then write out to a different place.
glob primer
I'm trying to get browser-sync to inject styles using gulp. I've pretty much copied and pasted from the tutorial, but nothing happens. The sass gets compiled correctly, but the injection doesn't happen. Any ideas what I've done wrong, or how to debug this?
I'm also using MAMP if it makes any difference at all.
My Gulp file:
var gulp = require('gulp'),
sass = require('gulp-sass'),
browserSync = require('browser-sync').create();
// Proxy Server
gulp.task('serve', ['sass'], function() {
browserSync.init({
proxy: "local.website.com"
});
gulp.watch('../css/source/*.scss', ['sass']);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src('../css/source/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('../css/build'))
.pipe(browserSync.stream());
});
gulp.task('default', ['serve']);
The response in my console:
[gulp] Starting 'default'...
[gulp] Finished 'default' after 4.61 μs
[BS] Proxying: http://local.website.com
[BS] Access URLs:
-------------------------------------
Local: http://localhost:3000
External: http://192.168.8.12:3000
-------------------------------------
UI: http://localhost:3001
UI External: http://192.168.8.12:3001
-------------------------------------
[gulp] Starting 'sass'...
[BS] 1 file changed (main.css)
[gulp] Finished 'sass' after 114 ms
[gulp] Starting 'sass'...
[BS] 1 file changed (main.css)
[gulp] Finished 'sass' after 115 ms
If it matters, here is my package.json:
{
"devDependencies": {
"browser-sync": "^2.9.11",
"gulp": "^3.9.0",
"gulp-sass": "^2.0.4"
}
}
The problem in my case was Drupal - it uses #import instead of link to add CSS files. This module solves it! https://www.drupal.org/project/link_css
You say you've copy pasted from the tutorial, but you didn't copy this part that actually notifies browserSync of changes:
gulp.watch('../css/source/*.scss').on('change', browserSync.reload);
I'm using "gulp-bower" to auto install all the libs from bower.json, I also want gulp to minify all libs once it's been download. This is my code:
var gulp = require('gulp');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var bower = require('gulp-bower');
var mainBowerFiles = require('main-bower-files');
gulp.task('bower', function() {
return bower()
.pipe(gulp.dest("./bower_components"))
});
gulp.task('minifyBower', function() {
return gulp.src(mainBowerFiles())
.pipe(concat('lib.js'))
.pipe(gulp.dest('dist'))
});
gulp.task('default', ['bower','minifyBower']);
If I run this I got this error.
Starting 'bower'...
[11:23:06] Using cwd: /Users/yizhou/Documents/Yi
[11:23:06] Using bower dir: ./bower_components
[11:23:06] Starting 'minifyBower'...
[11:23:06] 'minifyBower' errored after 1.53 ms
[11:23:06] Error: Bower components directory does not exist at /Users/yizhou/Documents/Yi/bower_components
at Error (native)
at module.exports (/Users/yizhou/Documents/Yi/node_modules/main-bower-files/lib/index.js:76:71)
at Gulp.<anonymous> (/Users/yizhou/Documents/Yi/gulpfile.js:16:21)
at module.exports (/Users/yizhou/Documents/Yi/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/Users/yizhou/Documents/Yi/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/Users/yizhou/Documents/Yi/node_modules/gulp/node_modules/orchestrator/index.js:214:10)
at Gulp.Orchestrator.start (/Users/yizhou/Documents/Yi/node_modules/gulp/node_modules/orchestrator/index.js:134:8)
at /usr/local/lib/node_modules/gulp/bin/gulp.js:129:20
at process._tickCallback (node.js:355:11)
at Function.Module.runMain (module.js:503:11)
[11:23:06] bower cached git://github.com/jquery/jquery.git#2.1.4
[11:23:06] bower validate 2.1.4 against git://github.com/jquery/jquery.git#~2.1.4
[11:23:07] bower install jquery#2.1.4
[11:23:08] Finished 'bower' after 2 s
gulp runs every task asynchronously by default, to improve performance. If you want to run in sequence, you need to explicit declare dependencies:
gulp.task('minifyBower', ['bower'], function() { /* ... */ });
Now minifyBower won't run until bower is run. If you need more complex stuff, you should use something like run-sequence.
What I do?
Run gulp (SCSS files are being processed, I get a CSS file)
I change any SCSS file again
Expected:
CSS file from 1. is updated with the changes from 2.
What happens?
CSS file from 1. isn't changed
Command line output:
$ gulp
[09:24:28] Using gulpfile c:\Users\User\_dev\github\project\gulpfile.js
[09:24:28] Starting 'sass'...
[09:24:28] Finished 'sass' after 98 ms
[09:24:28] Starting 'default'...
[09:24:28] Finished 'default' after 7.31 μs
[09:24:35] sass-watch saw _base.scss was changed
[09:25:39] sass-watch saw _base.scss was changed
gulpfile.js:
gulp.task('sass', function() {
watch({ glob: 'css/**/*.{scss,sass}', name: 'sass-watch'})
.pipe(plumber())
.pipe(sass())
.pipe(gulp.dest('css'))
});
gulp.task('default', ['sass']);
Notes:
Issue on GitHub (gulp)
Issue on GitHub (gulp-watch)
gulpfile.js on GitHub Gist)
OS: Win7
node: 0.10.29
npm: 1.4.14
The way the source files are piped in is not important. The result stays the same when using gulp.src()
I dont think your sass task is correctly written.
Try something like this:
var gulp = require('gulp');
var sass = require('gulp-sass')
gulp.task('sass', function () {
gulp.src('PATH-TO-SASS-FILES/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});