I have a gulp task to move fonts:
gulp.task('move', function(cb) {
return gulp.src('./packages/my-package#1.0.17-alpha.3/fonts/*')
.pipe(gulp.dest('./build/fonts/'));
});
This working however the my-package number will change. Im trying to alter the gulp task so that it will still work when the package number changes:
gulp.task('move', function(cb) {
return gulp.src('./packages/my-package#*/fonts/*')
.pipe(gulp.dest('./build/fonts/'));
});
This does move the fonts but it also adds some folders.
This is what it does:
./build/fonts/my-package#1.0.17-alpha.3/fonts/ (fonts here)
What I need is this:
./build/fonts/ (fonts here)
Ive fixed this with gulp-flatten:
var flatten = require('gulp-flatten');
gulp.task('move', function(cb) {
return gulp.src('./packages/my-package#1.0.17-alpha.3/fonts/*')
.pipe(flatten())
.pipe(gulp.dest('./build/fonts/'));
});
https://www.npmjs.com/package/gulp-flatten
Related
I have a gulp-watch script that watches for changes in my image directory then process the images. The problem is that photoshop save for web is putting temp files in the directory and then renaming them very quickly, which trips up my image processing script. I would like to exclude them from the watch script.
The temp files are formatted as so moog-mftrem_tmp489245944
I would like to use the _tmp string to exclude, but not sure how to exclude characters in the middle of a file name. Here is what I have tried but doesn't seem to work:
gulp.task('watch', function() {
gulp.watch(['app/images/pedals/*.png','!app/images/pedals/*_tmp*'], ['images']);
});
Thanks for any help!
While your temp files don't have extensions, glob paths don't know what to do if you don't specify one. It becomes merely a path to a folder, and indeed it doesn't find a folder name matching your glob.
Try:
gulp.task('watch', function() {
gulp.watch(['app/images/pedals/*.png','!app/images/pedals/*_tmp*.*'], ['images']);
});
Note the extra: .* (period asterisk)
For completeness I like to add the recursive globstar /**/
i.e.
gulp.task('watch', function() {
gulp.watch(['app/images/pedals/**/*.png','!app/images/pedals/**/*_tmp*.*'], ['images']);
});
consider using 'gulp-filter' :
const gulp = require('gulp');
const filter = require('gulp-filter');
gulp.task('watch', function() {
gulp.watch('app/images/pedals/*.png', ['images']);
});
const f = filter(file => file.path.includes('tmp'));
gulp.task('images', function() {
return gulp.src('app/images/pedals/*.png')
.pipe(f)
.pipe(gulp.dest('./build'))
});
I want to put inside gulpfile something like:
require('web-component-tester').gulp.init(gulp);
gulp.task('default', function() {
gulp.watch(['elements/**', 'test/**'], ['test:local']);
});
The purpose is to watch test folders or elements folders (with Polymer components). If some of them will change, run test with each build.
my wct.conf.js:
module.exports = {
root: '.tmp/elements/',
suites: ['**/test/'],
plugins: {
local: {browsers: ['chrome']},
}
};
I found the code above on some page but after I add some tests and then type gulp in my terminal I found error, because .tmp folder is not updated and strange errors like Polymer is not definedor ajax.generateRequest is not a function. I got also right errors when I intentionally made a mistake in a test to fail it, so it looks like something is ok, but not at all.
I add the tests to the existing project with lots of files. When I tried to do the same thing on empty project I also got the same error until I type bower install.
Is there any chance that this is the problem with bower dependencies?
Or have you any idea what is wrong? Is this part of code in gulpfile right to perform the desired effect?
Thanks a lot.
I am not answering your question directly, because its been a while since I've done it that way. But the following defines a sub task from among others to define a task called 'client' which then runs the tests in a frame buffer (so I don't have disturbing windows popping up all over the place when the tests run - they just run and output in a console window. Its effectively spawning a command line version of wct and I don't have a wct.conf file at all.
(function() {
'use strict';
const spawn = require('child_process').spawn;
module.exports = function(gulp) {
gulp.task('test:client',['lint:client'], () => {
var child = spawn('xvfb-run', ['-a', 'wct', '--color'], {cwd: process.cwd()});
child.stdout.setEncoding('utf8');
child.stdout.on('data', function(data) {
process.stdout.write(data);
});
child.stderr.setEncoding('utf8');
child.stderr.on('data', function(data) {
process.stderr.write(data);
});
});
gulp.task('client',function() {
gulp.watch([
'app/index.html',
'app/src/*.html',
'app/test/*.html',
'aoo/mocks/*.html',
'gulpfile.js',
'tasks/*.js'
],['test:client']);
});
};
})();
This file is one file within the tasks directory (which as you can see I am watching)
My gulpfile loads this, and other tasks like so (I copied this from the angular.js team who used it to load some of there tasks supporting angular)
(function() {
'use strict';
require('dotenv').config(); //load our environment
var gulp = require('gulp');
var includeAll = require('include-all');
/**
* Loads task modules from a relative path.
*/
function loadTasks(relPath) {
return includeAll({
dirname: require('path').resolve(__dirname, relPath),
filter: /(.+)\.js$/
}) || {};
}
// *
// * Invokes the function from a Gulp configuration module with
// * a single argument - the `gulp` object.
function addTasks(tasks) {
for (var taskName in tasks) {
if (tasks.hasOwnProperty(taskName)) {
tasks[taskName](gulp);
}
}
}
/**
* Add all Gulp tasks to the gulpfile.
* Tasks are in `tasks/`
*/
addTasks(loadTasks('tasks/'));
// require('gulp-load-tasks')(__dirname + '/tasks');
gulp.task('default', ['lint:gulp','client','server']);
})();
I have wanted to delete two folders inside the folder 'dest' so I did
gulp.task('del', function () {
// add task
return gulp.src('./app/static/dest', {read: false})
.pipe(clean());
});
Under dest folder, there are js and css folder and inside them there are js and css files respectively. When I run gulp, it deletes js folder and files successfully but does not delete the css files. What is the problem?
By the way the default task function is:
gulp.task('default', ['del'], function() {
gulp.start('transform');
gulp.start('styles');
gulp.watch('./app/static/src/js/*.js', ['transform'])
gulp.watch('./app/static/src/css/*.scss', ['styles'])
});
I'm trying to use these two gulp plugins together:
gulp-html-minifier
gulp-inject-stringified-html
Or put differently, I'm trying to inject the contents of files containing html fragments into my javascript files after they're minified.
When I'm trying to run a straight up gulp build I get this:
Error: ENOENT: no such file or directory, open 'C:\path\to\.temp\template.html'
Here's a repro of my situation. My folder structure:
/src/app.js
/src/template.html
/gulpfile.js
/package.json
My gulpfile.js:
var gulp = require('gulp');
var injectHtml = require('gulp-inject-stringified-html');
var htmlmin = require('gulp-html-minifier');
gulp.task('minify', [], function() {
gulp.src('src/*.html')
.pipe(htmlmin())
.pipe(gulp.dest('.temp'));
});
gulp.task('default', ['minify'], function() {
gulp.src('src/*.js')
.pipe(injectHtml())
.pipe(gulp.dest('.build'));
});
The template.html file:
<div>My Template</div>
The app.js file:
var html = { gulp_inject: "../.temp/template.html" };
Now, if I run minify manually first, things will work as expected. From this I speculate I'm not using Gulp correctly. I reckon I'd need to pipe the result of htmlmin into the injectHtml method. But I fail to see how.
How can I get these two plugins to play together nicely?
You are missing a return in the minify task. It should look like that:
gulp.task('minify', [], function() {
return gulp.src('src/*.html')
.pipe(htmlmin())
.pipe(gulp.dest('.temp'));
});
Without return, the default task doesn't have any way to know that minify finished, so it may start before the minified html file was created.
There is the following gulp tasks:
// Processing templates task
gulp.task('templates', function() {
return gulp.src('app/**/*.slim')
.pipe(slim({pretty: true}))
.pipe(minifyHTML())
.pipe(gulp.dest(dist));
});
// Watching files for changes task
gulp.task('watch', function() {
gulp.watch('app/**/*.slim', ['templates']);
});
As you can see templates task finds and transforms all .slim files in .html file. It works good. Also there is watch task which watches changes and executes templates task after it. But I want that after watch task finds some changes in template A gulp will transform only template A, not all templates. I don't understand how I can get changed file and transform it. Please, help me. Thanks in advance.
I think you can try Incremental build.
gulp.task('default', function () {
return gulp.src('app/**/*.slim')
.pipe(watch('app/**/*.slim'))
.pipe(slim({pretty: true}))
.pipe(minifyHTML())
.pipe(gulp.dest(dist));
});