var srcArticleImage = 'src/recommended-reads-images/';
var distArticleImage = 'dist/assets/recommended-reads-images/';
gulp.task('article-images', function() {
gulp.src(srcArticleImage + "*", srcArticleImage + "**/*"])
.pipe(gulpif(global.build, imagemin([
imagemin.gifsicle({interlaced: true}),
imagemin.jpegtran({progressive: true}),
imagemin.optipng({optimizationLevel: 5}),
imagemin.svgo({plugins: [{removeViewBox: true}]})
])))
.pipe(gulp.dest(distArticleImage))
.pipe(gulpif(global.build, size({showFiles: true, showTotal: false})))
.pipe(gulpif(!global.build, notify({message: 'Article Images Compiled', onLast: true})))
});
When the above task is run, I expect it to take the files from the src directory, minify them and then copy them over to the destination.
However I have a problem when the task runs. Only 81 images are being output to the destination folder, but there are 103 files in the src folder.
Would appreciate it if anyone could shed some light on this issue, I have bashed my head against the keyboard for an hour and a half trying to fix this issue.
Hope somebody has the fix, thanks.
Related
But as it compares the files, being the same folder, it gets a bit obvious that if they compare the same files, always be the same but I need the source and output files to be in the same folder, if anyone knows a solution, I will stay thankful.
Like this example:
function webpConvert() {
return src(folder + "/**/*.{jpg,png}")
.pipe(newer(folder))
.pipe(
parallelCore(
webp({
quality: 100,
lossless: true
})
),
os.cpus().length
)
.pipe(dest(folder))
}
I'm using gulp4.
It's not possible use Gulp-newer or Changed in cases of the same folder for both src and dest. You can use gulp-cache-files or gulp-file-cache.
copy: {
build: {
cwd: 'app',
src: ['**', '!**/vendors/**', '!**src/js/*.js',],
dest: 'dist',
expand: true
}
}
I am using grunt build scripts to build a distribution folder for the completed product. However, its not 100% automatic and dynamic. For example, I have a folder of xml content files. Yet, I don't use them all. Right now, the whole folder is copied over to the build version. Manually I have to go in and delete the xml files I don't want in the build version then run it. Or I could go into the grunt file and and tell it to ignore those files.
The problem is that I don't want to do that every time. A theoretical idea I had would be to have an xml file where I define elements to represent certain other files.
<bootstrap>true</bootstrap>
<extraContent>false</extraContent>
This would say that the file correlated to bootstrap and extraContent should or shouldn't be ignored in the build. I am trying to figure out if you could do this in grunt.
something like the following is how I see the logic playing out...
var bootstrap = $(xml).find("bootstrap").text()
if(bootstrap == "false"){
var url = src/bootstrap.css
//Here add the correlated filepath defined above to be ignored
}
The problem is not only writing this so grunt knows what it is, but also combining that logic with the actual "copy:{}" script I showed above
If you want to include/exclude files based on their contents you can use filter function for this. Examples can be found in the official documentation: https://gruntjs.com/configuring-tasks#custom-filter-function.
The filter property can help you target files with a greater level of detail.
In your case this could be something like this:
copy: {
build: {
cwd: 'app',
src: ['**', '!**/vendors/**', '!**src/js/*.js',],
dest: 'dist',
expand: true,
// this filter function will copy xml files only when `bootstrap` is set to 'true'
filter: filepath => {
if (require('path').extname(filepath) !== 'xml')
return true;
const xml = require('fs').readFileSync(filepath, 'utf8');
const json = require('xml2json').toJson(xml);
return json.bootstrap === 'true';
}
}
}
You can then use the process function to copy only certain contents from specific files: https://github.com/gruntjs/grunt-contrib-copy#process
This option is passed to grunt.file.copy as an advanced way to control the file contents that are copied.
I have a Gulp task where I would like to compile HTML templates to javascript (lets say from /views directory), add all other javascript sources to this (from /js directory) and concatenate all of them into one single file.
Its also important to have the files concatenated in the correct order, meaning: all files from /js then all compiled files from /views.
My goal is to avoid creating temporary files in general, so the solution I seek only works with streams.
This task currently works without correctly ordering the output:
var eventstream = require('event-stream');
gulp.task('dist', function()
{
return eventstream.merge(
gulp.src(['**/[^_]*.js', '!**/_*/**'], { cwd: 'js' })
,
gulp.src(['**/[^_]*.html', '!**/_*/**'], { cwd: 'views' })
.pipe(compile_views())
)
.pipe(concat('output.js'))
.pipe(gulp.dest('dist'));
});
Tried a few stream merging modules from NPM with less success, all of them scrambled my output so far:
multistream
stream-series
merge-stream
ordered-merge-stream
Also tried using the gulp-order plugin after merging the streams, which still does not ordered it correctly.
Did I miss something, or am I doing something the bad way? I'm not so expert in pipes yet.
Any help would be appreciated!
Thanks!
I think streamqueue is what you're looking for:
var streamqueue = require('streamqueue');
gulp.task('dist', function() {
return streamqueue({ objectMode: true },
gulp.src(['**/[^_]*.js', '!**/_*/**'], { cwd: 'js' }),
gulp.src(['**/[^_]*.html', '!**/_*/**'], { cwd: 'views' })
.pipe(compile_views())
)
.pipe(concat('output.js'))
.pipe(gulp.dest('dist'));
});
Well met!
For the past hours I have been trying to get the mainFiles option to work, but it seems to ignore every file that I include in there. I have tried multiple plugins in the list- but none of them get through. I am rather new with Grunt, admittedly, but I have been going through the grunt-bower-concat documentation but, nothing there. And have been adding a number of console logs inside the actual plugin code, shows no files are being passed (reverted the file after, of course).
This is the GruntFile I'm working with:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
bower_concat: {
main: {
dest: 'Assets/Build/Scripts/plugins.js',
cssDest: 'Assets/Build/Styles/plugins.css',
dependencies: {
'amplify': 'jquery'
},
mainFiles: {
bootstrap: ['bower_components/bootstrap/dist/css/bootstrap.css']
},
exclude: [
'leaflet-illustrate'
]
}
}
});
grunt.loadNpmTasks('grunt-bower-concat');
grunt.registerTask('buildbower', ['bower_concat']);
};
Leaflet-Illustrate has been excluded (for now) because it wreaks havoc on the actual task, and without the mainFiles option, I can't include it correctly.
Is there anyone who can direct me in the right way, or correct me?
Thanks in advance!
As it turns out, I entered a full path which was not needed. Meaning, this part works:
main: {
mainFiles: {
'bootstrap': ['dist/css/bootstrap.css']
}
Setting up gulp for the first time. I've got it correctly compiling the files, it's just sticking them in the wrong place, and I can't quite figure out what to change to get it right.
After they compile, I have it adding the .conveyor.js suffix and then I want it to place them in the /scripts directory. But it's placing them in /scripts/src/js/ — it's adding a couple subdirectories. The raw dev files themselves are in src/js/ directories in a separate location, but I don't want that to carry over. Here's my gulp setup:
module.exports = function() {
var files = [
'./src/js/dashboard.js',
'./src/js/pages.js',
'./src/js/poll.js'
];
var tasks = files.map(function(entry) {
return browserify({
entries: [entry],
paths: ['./node_modules', './src/js/']
})
.bundle()
.pipe(source(entry))
.pipe(rename({
extname: '.conveyor.js'
}))
.pipe(gulp.dest('../scripts/'));
});
return es.merge.apply(null, tasks);
};
The way I understand it, "files" are all of the files it looks for to compile. "paths" allow you to specify directories that your require statements can be relative to so you don't have to do a bunch of period-forwardslashing. and then "dest" is where you want the files to end up. But I'm clearly misunderstanding something.
The offender is here
.pipe(source(entry))
entry is set to the exact path you are using for the files path. Hence the duplication.
source() in this isn't the source of the file, but ends up being the file that gets created.
You would want to modify the object to provide just the file name as the entry and the source path is separated. Also, you can drop the rename method, I think.