Edit: Solved below
Here is my gulpfile
var gulp = require('gulp');
var sass = require('gulp-sass');
var minify = require('gulp-minify');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
var allSassFiles = 'scss/**/*.scss';
var sassFile = gulp.src('./scss/style.scss');
var cssDest = '../wp-content/themes/Jupiter-child/uwkc_assets/css');
var sassify = function() {
return sassFile.pipe(sourcemaps.init())
.pipe(sass({outputStyle: 'compressed', onError: sass.logError}))
.pipe(gulp.dest(cssDest + '/prod'))
.pipe(sourcemaps.write())
.pipe(gulp.dest(cssDest));
};
gulp.task('doSass', sassify);
gulp.task('watchSass', function(){
return gulp.watch(allSassFiles, ['doSass']);
});
The sass glob is the variable "allSassFiles".
s
When I run the task "doSass" everything compiles fine. My css changes are represented in the browser.
However when I run the "watchSass" task things only change once, and then further changes are not reflected in the browser. It is like running only one occurrence of "doSass".
What is weird is that in my console I see the start and complete logs for doSass as if everything is running fine. However I don't see any changes being made to my css destination files.
I've tried many things, mixing up what I am returning, changing the glob syntax. Lots of things. For some reason I just can't get the darned thing to work.
Anyone see anything I might be missing? I have a feeling it has to do with what is returned with gulp-sass or sourcemaps, but I don't know enough about those to figure out the answer.
Thanks everyone!
This is what I figured out:
I needed to create a new gulp.src() object every time I ran sassify in the watch runtime apparently. Also I hope I am using those terms right.
I re-wrote:
return sassFile.pipe(sourcemaps.init())
in the sassify function to:
return gulp.src('./scss/style.scss').pipe(sourcemaps.init())
This did the trick. It makes sense to me that watch would re-use the same src object referenced in the variable sassFile that didn't represent a changed scss file.
Related
Consider the following gulp file:
var gulp = require('gulp');
var eslint = require('gulp-eslint');
var debug = require('gulp-debug');
gulp.task('lint', function (done) {
gulp
.src([
'src/**/*.js',
'!src/public/javascripts/external/*'
])
.pipe(eslint())
.pipe(eslint.format())
//.pipe(debug({title: 'Linting:'}));
done();
});
If my src folder contains too many files (I am not talking about an excessive number. It's less than 20), then gulp lint will only output
Using gulpfile [my/path/to/gulpfile]
Starting 'lint'...
Finished 'lint' after 55ms
There won't be any warnings from ESLint, even though I made sure there are problems in my code of course. This problem can be reproduced by manually adding javascript files from my src folder without using wildcards. After a certain number of files (I sadly forgot to count), errors won't be displayed any more. This does depend not on which files I add, just the number.
For some reason this behavior can be 'fixed' by adding the commented line that outputs debug information, so I am assuming my mistake has something to do with me misunderstanding how the gulp works internally. ESLint also works fine when called externally. Any ideas what the problems could be or steps to narrow it down?
I was able to fix my problem although I am not 100% sure what the problem was. According to the gulp-eslint package description you are supposed to return the result of the pipes. So the correct gulpfile would look like this:
var gulp = require('gulp');
var eslint = require('gulp-eslint');
var debug = require('gulp-debug');
gulp.task('lint', function () {
return gulp // note the return here
.src([
'src/**/*.js',
'!src/public/javascripts/external/*'
])
.pipe(eslint())
.pipe(eslint.format());
// no call to 'done()' is needed
});
My guess is that the plugin runs asynchronously and I ended the task by calling done() before it was actually done. Printing the debug information either happened after the asynchronous task was done or it bought enough time to finish. Now gulp will properly receives a promise (or something like that) and waits until it is finished.
Can anyone confirm this guess?
I was hoping to eventually set up a Gulp workflow with uncss as I have a lot of unused Bootstrap styles in my sites. I am trying to test some files first though and when I run it, it starts but just hangs and never stops. I got the code directly from the plugin page so I'm not sure what is going on. I haven't added anything more complicated yet. Does anyone see errors?
var gulp = require('gulp');
var uncss = require('gulp-uncss');
gulp.task('default', function () {
return gulp.src('css/landing.css')
.pipe(uncss({
html: ['index.html']
}))
.pipe(gulp.dest('out'));
});
I'm using gulp to build a single javascript file with gulp-concat and gulp-uglify.
Original Files
//File 1
var Proj = Proj || {};
//File 2
Proj.Main = (function() {
var Method = function(){ /*Code*/ };
return { "Method":Method };
})();
//File 3
Proj.Page = (function() {
var Method = Proj.Main.Method;
return { "Method":Method };
})();
Gulp returns a bad minified file because these files are being concatenated in the wrong order. I know I can specify the order in .src([]) but I don't want to maintain the array as I add javascript files.
Is there a way to create references to these "namespaces" without having to worry about the order of the files concatenated? Or, is there a way for gulp to handle concatenation with the knowledge of these namespaces auto-magically?
EDIT:
I know I can specify the file order inside the .src([]). I want to develop without having to worry about the file order, whether it be through a gulp package or a javascript framework. Thank you for responses that help but I need a definitive "No. You cannot do this." or "Yes. Here's how..." to mark the thread as answered.
Well, one option is to try gulp-order.
Also, check out this answer to "gulp concat scripts in order?".
Basically, it mentions what you already said, about having to explicitly name the files in the order you want them to come in. I know you don't want to do that, but how else would gulp know which order you want your files in?
One thing worth pointing out, though, is that you have a group of files where the order doesn't matter, and then, say, 2 files where the order does matter, you can do something like this:
gulp.src([
'utils/*.js',
'utils/some-service.js',
'utils/something-that-depends-on-some-service'
])
gulp-concat doesn't repeat files, so everything that's not some-service.js or something-that-depends-on-some-service.js will get concatenated first, and then the last two files will be concatenated in the proper order.
Since it hasn't been mentioned, implementing webpack or browserify will absolutely solve this problem without implementing some sort of hacky feeling solution.
Here is a simple example of how to use it:
var source = require('vinyl-source-stream'), //<--this is the key
browserify = require('browserify');
function buildEverything(){
return browserify({
//do your config here
entries: './src/js/index.js',
})
.bundle()
.pipe(source('index.js')) //this converts to stream
//do all processing here.
//like uglification and so on.
.pipe(gulp.dest('bundle.js'));
}
}
gulp.task('buildTask', buildEverything);
And inside your files you use require statements to indicate which files require others.
In my gulpfile.js, I'm trying to minify and enable sourcemaps in a release task.
Based on a config variable, I'm trying to pipe further actions into the stream. The check for the condition is using gulp-if-else. My set of dependencies (only relevant ones) are below
var gulp = require('gulp');
var browserify = require('browserify');
//... elided
var through= require('through2');
var sourcemaps= require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
var ifelse = require('gulp-if-else');
Here's the code that I'm having trouble with. If I keep three ifelse pipe calls individually (currently commented out), then the source is uglified and sourcemap is created as expected.
Repeating the condition didn't feel clean - so I tried replacing it with the minify function - and then the behavior is strange.
If I don't give relative path in sourcemaps.write then the js file has a inline sourcemap.
With a relative path, source is uglified, the js has a sourcemap comment pointing to app.js.map but app.js.map itself is never generated
var minify = function() {
var stream = through({objectMode:true})
stream
.pipe(sourcemaps.init())
.pipe(uglify())
.pipe(sourcemaps.write("./"));
return stream;
};
var bundledStream = through({objectMode:true});
bundledStream
// Report compile errors
.on('error', handleErrors)
.on('end', reportFinished)
// Use vinyl-source-stream to make the
// stream gulp compatible. Specifiy the
// desired output filename here.
.pipe(source(entry + '.js'))
// Specify the output destination
.pipe(buffer())
// uncommenting the following three lines works
//.pipe(ifelse(!config.debug,function() {return sourcemaps.init()}))
//.pipe(ifelse(!config.debug, uglify))
//.pipe(ifelse(!config.debug,function() {return sourcemaps.write("./")}))
// this works partially?!? but I don't know why. I'd like this version to work
.pipe(ifelse(!config.debug, minify))
.pipe(gulp.dest(config.destFolder));
I'm just picking up gulp (and node, really) and ran into this weird behavior that I can't seem to reason about. Would be a great help if someone can demystify it for me.
UPDATE: Complete gulpfile.js
UPDATE2: Added gulp-filelog. added pipe(filelog("minify")) and pipe(filelog("outer")) to the streams. filelog prints two files inside the fn but only one file outside. Why is the second file being dropped/ignored? What am I missing?
[09:43:24] [minify] [1] [E:\....\Dashboard\app.js.map]
[09:43:24] [minify] [2] [E:\....\app.js]
[09:43:24] [outer] [1] [E:\....\Dashboard\app.js]
[09:43:24] [outer] Found [1] files.
[09:43:24] [minify] Found [2] files.
I have a scenario where a client of mine wants to drop LESS files into a src directory (via FTP), and for them to be automatically outputted as CSS to a build directory. For each LESS file, once its resultant CSS file is created, it should be removed from the src directory. How can I do this with Gulp?
My current gulpfile.js is:
var gulp = require("gulp");
var watch = require("gulp-watch");
var less = require("gulp-less");
watch({ glob: "./src/**/*.less" })
.pipe(less())
.pipe(gulp.dest("./build"));
This successfully detects new LESS files being dropped into the src directory and outputs CSS files into build. But it doesn't clean up the LESS files afterwards. :(
Use gulp-clean.
It will clean your src directory once you piped it. Of course, test it on a backup with different settings, and if you can't manage to make it work properly, don't hesitate to make a second task and use some task dependency to run the clean after your less task is completed.
If I'm right, when I tried to pipe gulp-clean after the gulp.dest, something went wrong, so I got another way to do this, here's an example with task dependency.
var gulp = require('gulp'),
less = require('gulp-less'),
clean = require('gulp-clean');
gulp.task('compile-less-cfg', function() {
return gulp.src('your/less/directory/*.less')
.pipe(less())
.pipe('your/build/directory'));
});
gulp.task('remove-less', ['less'], function(){
return gulp.src('your/less/directory)
.pipe(clean());
});
That's for the not-watching task. Then, you should use a watch on the *.less files, but you should get task remove-less running instead of less. Why ? Because of task dependency.
When you'll call the remove-less task, it will only start once the less task is complete. That way, the files will only be deleted once your less compilation is over, and not in the middle of it throwing errors.
It may not be the perfect method to get this working as I'm not an expert, but it's a safe and working solution for you to use. Also it's pretty clear to understand IMO.
gulp-clean is deprecated. Use the npm module del.
npm install --save-dev del
Here is how you should use it.
var gulp = require('gulp');
var del = require('del');
gulp.task('clean:mobile', function () {
return del([
'dist/report.csv',
// here we use a globbing pattern to match everything inside the `mobile` folder
'dist/mobile/**/*',
// we don't want to clean this file though so we negate the pattern
'!dist/mobile/deploy.json'
]);
});
gulp.task('default', ['clean:mobile']);