gulp task starts but does not end - gulp

I have the next files structure:
src/
themes/
default/
1.png
2.png
oneMoreTheme/
3.png
4.png
dist
themes/
default/
oneMoreTheme/
and the next gulpfile:
'use strict';
var gulp = require('gulp'),
_ = require('lodash'),
plugins = require('gulp-load-plugins')();
gulp.task('images', function () {
var streams = {},
themes = [
'default',
'oneMoreTheme'
];
streams.themesImages = [];
_.forEach(themes, function(theme) {
streams.themesImages.push(gulp.src('src/themes/' + theme + '/*.*')
.pipe(gulp.dest('dist/themes/' + theme + '/')));
});
streams.allThemeImages = plugins.merge(streams.themesImages);
return streams.allThemeImages;
});
I can not understand two things:
1) Why do I see in console the next text when task "images" starts:
"D:\home\projects\storyBook>gulp images
[15:05:23] Using gulpfile D:\home\projects\storyBook\gulpfile.js
[15:05:23] Starting 'images'..."
But when task is finished I do NOT see the next text:
"[12:13:56] Finished 'images' after 5.72 s"
Why do not I get this text? I do streams merge and then return merged stream to have synchronous task. Maybe I do something wrong?
2) If I add one code line to my privous code:
streams.allThemeImages = plugins.merge(streams.themesImages);
return streams.allThemeImages.pipe(gulp.dest('temp/')); // HERE IS NEW CODE LINE
I expect that in temp folder I'll have the next images:
temp/
1.png
2.png
3.png
4.png
Because I merged streams, first one contains 1.png and 2.png images and second one contains 3.png and 4.png. But in reality I get the next files:
temp/
1.png
2.png
What is wrong?

Related

Joining 2 strings in my Gulp file gives a non-sensical error?

Using node 16.2.0 on OSX. I new to Gulp.
I want to update the version in my package.json file that will contain the Git hash if on a feature branch, so I have this in my Gulp file
// pkg is defined somewhere else to be my Gulp file
// I have a "semVer" key in my package.json file
const {src, dest} = require('gulp');
const semver = require('semver');
...
const semVer = semver.parse(pkg.semVer);
// Functions getBranch() and getHash() are defined somewhere else,
// and they return the Git branch and hash respectively.
function manageVersion() {
var newVersion = semver.inc(semVer, 'patch');
var hash = "";
if (getBranch().includes('feature')) {
hash = getHash().toString();
newVersion = [newVersion, hash].join('-');
}
src(['../package*.json'])
.pipe(gulp_bump({
version: newVersion
}))
.pipe(dest('./'));
}
exports.manageVersion = manageVersion
I then do this, and get the non-sensical error
$ gulp manageVersion -f gulpfiles/version.js
[16:20:20] Working directory changed to /path/gulpfiles
[16:20:20] Using gulpfile /path/gulpfiles/version.js
[16:20:20] Starting 'manageVersion'...
[16:20:20] Finished 'manageVersion' after 99 ms
/path/node_modules/semver/semver.js:564
if (v1[key] !== v2[key]) {
^
TypeError: Cannot read property 'major' of null
at Function.diff (/path/node_modules/semver/semver.js:564:27)
at /path/node_modules/bump-regex/index.js:66:26
at String.replace (<anonymous>)
at module.exports (/path/node_modules/bump-regex/index.js:54:23)
at DestroyableTransform._transform (/path/node_modules/gulp-bump/index.js:29:5)
at DestroyableTransform.Transform._read (/path/node_modules/gulp-bump/node_modules/readable-stream/lib/_stream_transform.js:184:10)
at DestroyableTransform.Transform._write (/path/node_modules/gulp-bump/node_modules/readable-stream/lib/_stream_transform.js:172:83)
at doWrite (/path/node_modules/gulp-bump/node_modules/readable-stream/lib/_stream_writable.js:428:64)
at writeOrBuffer (/path/node_modules/gulp-bump/node_modules/readable-stream/lib/_stream_writable.js:417:5)
at DestroyableTransform.Writable.write (/path/node_modules/gulp-bump/node_modules/readable-stream/lib/_stream_writable.js:334:11)
I've checked ALL my values for newVersion and hash and they're valid strings. What am I missing?
Turns out I had to trim the string from the getHash() function
hash = getHash().trim();

Gulp: Recursively copy a file to every sub-directory

I have a file called foo and I want to copy it to every sub-directory.
For example if the current directory structure is:
- files
- A/
- B/
- C/
- D/
- D1/
- D2/
Then after the operation, it should be:
-files
- foo
- A/
- foo
- B/
- foo
- C/
- foo
- D/
- foo
- D1/
- foo
- D2/
- foo
How can I do this using Gulp
Note that I do not know what the sub-directories will be before hand, so it needs to be done dynamically, and the paths cannot be hard-coded.
You can accomplish this using the gulp-multi-dest and glob packages:
const gulp = require('gulp'),
multiDest = require('gulp-multi-dest'),
glob = require('glob');
function copyToAll(done) {
glob('files/**/', (err, matches) => {
if (err) {
console.log('Error', err);
} else {
gulp.src('files/foo').pipe(multiDest(matches));
}
done();
});
}
exports.default = copyToAll;

Gulp task that write all filenames in another file

I'm getting started with Gulp and I want to write a task that does the following:
Browse a directory and sub directories to find files using the pattern *.doc.cjsx
Write all the file path found in another file named components.coffee
I'm using gulp-inject. I know that I eventually will need to write to a proper JS file instead of a coffee file (to avoid track a content-generated file on git)
Here is my task: (coffee)
gulp.task 'react-components', ->
gulp.src('src/apis/front/commons/components.coffee')
.pipe(plumber())
.pipe(
inject(
gulp.src(
[
"src/apis/front/commons/button/*.doc.cjsx"
],
read: false
),
{
ignorePath: 'src/apis/front/commons/'
addPrefix: 'require ./' # I need to make the path relative at runtime, I haven't tested this yet because it doesn't generate any output, yet.
starttag: '# inject:components'
}
)
)
.pipe(debug({minimal: false}))
.pipe(gulp.dest('src/apis/front/commons/'))
Here is the components.coffee file:
module.exports = [
require "./button/button.doc.js" # This should be auto-generated inside the starting tag and closing tag.
# inject:components
# endinject
]
Here is the output when I run the task:
[10:15:24] Using gulpfile ~/service/www/hapi-rho/gulpfile.coffee
[10:15:24] Starting 'react-components'...
[10:15:24] gulp-inject 1 files into components.coffee.
[10:15:24] gulp-debug:
cwd: ~/service/www/hapi-rho
base: ~/service/www/hapi-rho/src/apis/front/commons/
path: ~/service/www/hapi-rho/src/apis/front/commons/components.coffee
[10:15:24] gulp-debug: 1 item
[10:15:24] Finished 'react-components' after 31 ms
It seems to be working fine because gulp says that it injected 1 file into components.coffee, if I add another *.doc.cjsx file in the folder then it says it injected two files.
But the content of components.coffee isn't changed, so I'm obviously missing something. Either the starttag isn't found, or it's something else.
Solution:
Here is my solution, based on Sven's answer. The paths have changed since and I'm generating an object instead of an array now, but the principle is the same.
gulp.task 'react-components', ->
gulp.src('src/apis/front/components/components.coffee')
.pipe(plumber())
.pipe(
inject(
gulp.src('src/apis/front/components/**/*.doc.cjsx', read: false),
ignorePath: 'src/apis/front/components/'
starttag: '# inject:components'
endtag: '# endinject'
transform: (filepath, file, i, length) ->
filename = filepath.replace(/cjsx$/, 'js')
suffix = if i + 1 < length then ',' else ''
'"' + filename + '": require ".' + filename + '"'# + suffix
)
)
.pipe(debug(minimal: false))
.pipe gulp.dest('src/apis/front/components/')
First off, you forgot to specify your endtag.
Secondly, you need to provide a transform option. If you don't explicitly provide one the default transform function will be used, which uses the target file type (coffee in your case) and the source file type (cjsx in your case) to choose a sensible transformation for you.
Unfortunately there is no default transformation for the coffee/cjsx pairing available. That means you have to write one yourself.
Here's what that might look like in your case (regular JavaScript, since I'm not well-versed in CoffeeScript):
gulp.task('react-components', function() {
return gulp.src('src/apis/front/commons/components.coffee')
.pipe(plumber())
.pipe(inject(
gulp.src("src/apis/front/commons/button/*.doc.cjsx", {read:false}),
{
ignorePath: 'src/apis/front/commons/',
starttag: '# inject:components',
endtag: '# endinject',
transform: function (filepath, file, i, length) {
return 'require ".' + filepath.replace(/cjsx$/, "js") +
'"' + (i + 1 < length ? ',' : '');
}
}
))
.pipe(debug({minimal: false}))
.pipe(gulp.dest('src/apis/front/commons/'));
});

Issue with Compass/Sass config.rb

I am trying to update my asset directories within my scss config.rb file. I need to access compass mixins such as height: image-height($image); For this to work, my images path has to be relative to my project’s image directory, defined in your config.rb file. However, I cannot get this to work. I have used the compass url_helpers but nothing seems to be changing. No matter how I update the assets in my config.rb, the following is returned when declaring an image variable in my scss..."No such file or directory # rb_sysopen - /private/var/www/websites/gc/app/sites/all/themes/merge/scss/../images/../search-b-image.jpg" Where is this ../images/.. coming from if its not in my config.rb? Any help is much appreciated.
config.rb file is:
http_path = "/"
css_dir = "compiled_css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"
environment = :development
relative_assets = true
output_style = :expanded
output_style = :compressed
preferred_syntax = :scss

batch convert HTML to Markdown

I have a whole lot of html files that live in one folder. I need to convert these to markdown I found a couple gems out there that does this great one by one.
my question is...
How can I loop though each file in the folder and run the command to convert these to md on a separate folder.
UPDATE
#!/usr/bin/ruby
root = 'C:/Doc'
inDir = File.join(root, '/input')
outDir = File.join(root, '/output')
extension = nil
fileName = nil
Dir.foreach(inDir) do |file|
# Dir.foreach will always show current and parent directories
if file == '.' or item == '..' then
next
end
# makes sure the current iteration is not a sub directory
if not File.directory?(file) then
extension = File.extname(file)
fileName = File.basename(file, extension)
end
# strips off the last string if it contains a period
if fileName[fileName.length - 1] == "." then
fileName = fileName[0..-1]
end
# this is where I got stuck
reverse_markdown File.join(inDir, fileName, '.html') > File.join(outDir, fileName, '.md')
Dir.glob(directory) {|f| ... } will loop through all files inside a directory. For example using the Redcarpet library you could do something like this:
require 'redcarpet'
markdown = Redcarpet::Markdown.new(Redcarpet::Render::HTML, :autolink => true)
Dir.glob('*.md') do |in_filename|
out_filename = File.join(File.dirname(in_filename), "#{File.basename(in_filename,'.*')}.html")
File.open(in_filename, 'r') do |in_file|
File.open(out_filename, 'w') do |out_file|
out_file.write markdown.render(in_file.read)
end
end
end