We Keep Coding

gulp4 minify replacehtmlblock not working

Every time I insert links of the vendors in the .html file, htmlreplace / htmlreplaceblock not working/ not replacing "app.min.css" and "app.min.js" in the dest .html. is there any easy way to pipe vendors to folders? or is there any other way to pipe vendors? please help.
// vendor task
gulp.task('vendor', gulp.parallel('vendor:fonts', 'vendor:bootstrap', 'vendor:purecounterjs', 'vendor:aos', 'vendor:popperjs', 'vendor:swiper', 'vendor:glightbox'));
// Copy vendor's to /dist
gulp.task('vendor:build', function() {
var jsStream = gulp.src([
'./assets/vendors/**/*'
])
.pipe(gulp.dest('./dist/assets/vendors'));
var fontStream = gulp.src(['./assets/fonts/bootstrap-icons/**/*.*']).pipe(gulp.dest('./dist/assets/fonts/bootstrap-icons'));
return merge (jsStream, fontStream);
})
// Replace HTML block for Js and Css file to min version upon build and copy to /dist
gulp.task('replaceHtmlBlock', function () {
return gulp.src(['*.html'])
.pipe(htmlreplace({
'js': 'assets/js/app.min.js',
'css': 'assets/css/app.min.css'
}))
.pipe(gulp.dest('dist/'));
});

How do i get cypress element fixed when detached from the Dom?

Cypress requires elements be attached in the DOM to interact with them.
The previous command that ran was:
cy.get()
This DOM element likely became detached somewhere between the previous and current command.
Common situations why this happens:
Your JS framework re-rendered asynchronously
Your app code reacted to an event firing and removed the element
You typically need to re-query for the element or add 'guards' which delay Cypress from running new commands.
Here is the block of code I am trying to run.
}),
it('Add-Income', ()=> {
cy.get('.add_btn').click()
cy.get(':nth-child(1) > .input_container > input').type('45000')
cy.get(':nth-child(2) > select').select('4')
cy.get(':nth-child(3) > select').select('32')
cy.get(':nth-child(4) > .input_container > input').invoke('removeAttr','type').type('12-12-1990{enter}')
//cy.get('.transaction_btn > button').click()
cy.get('.title > span').click({force: true})
}),
it('Add-Expenditure', ()=> {
cy.get('.add_btn').click()
cy.get('.overlay_card > :nth-child(4)').click()
cy.get(':nth-child(1) > .input_container > input').type('45000')
cy.get(':nth-child(2) > select').select('4')
cy.get(':nth-child(3) > select').select('32')
cy.get(':nth-child(4) > .input_container > input').invoke('removeAttr','type').type('12-12-1990{enter}')
//cy.get('.transaction_btn > button').click()
})

File css with 0kb in gulp

My gulp save the css width 0kb.
This is my code
https://jsfiddle.net/v6y0qkux/
gulp.task('jpg', function () {
gulp.src('./template/img/**/*.*')
.pipe(changed('./dist/img/'))
.pipe(imagemin({
progressive: true
}))
.pipe(gulp.dest('./dist/img/'));
});
Sometimes it save as normal, but the most times, it save 0km.

There is a solution that comes from a project of mine.
You need to install the npm package : gulp-minify-css
npm install gulp-minify-css
Here is the code to handle minimification.
var minimifyCss = require('gulp-minify-css');
gulp.task('minify-css', function() {
return gulp.src([__dirname + '/your directory/*/**.css'])
.pipe(minifyCss({comments:true, spare:true}))
.pipe(gulp.dest(__dirname + '/your directory destination'))
});

CSS and JS minification doesn't work with gulp-filter, gulp-csso, gulp-uglify

I'm working thorough johnpapa's course on automation with Gulp and seem to hit a weird wall: when I'm trying to run the CSS and JS concatenation and minification task it fails to do the minification.
This is the task:
gulp.task('optimize', ['inject'], function () {
var assets = $.useref.assets({searchPath: ''});
var cssFilter = $.filter(['**/*.css'], {restore: true});
var jsFilter = $.filter(['**/*.js'], {restore: true});
return gulp
.src(config.indexFile)
.pipe($.rename('test.jsp'))
.pipe($.plumber())
.pipe(assets)
.pipe(cssFilter)
.pipe($.csso())
.pipe(cssFilter.restore)
.pipe(jsFilter)
.pipe($.uglify())
.pipe(jsFilter.restore)
.pipe(assets.restore())
.pipe($.useref())
.pipe(gulp.dest(config.indexLocation))
;
});
inject is the task that injects css and js references to the index file (works correctly), $ is require('gulp-load-plugins')({lazy: true}) and config.indexFile is index.jsp.
My file structure (unlike the one in the course) is:
- ModuleDir
- dist
- css
- lib.css
- app.css
- fonts
- images
- js
- lib.js
- app.js
- css
- js
- web-app
- InnerDir
- index.jsp
- test.jsp
- package.json, bower.json, etc. (all the required files)
Basically, index.jsp is processed for CSS and JS library and application assets, which are minified and concatenated into lib.css, lib.js, app.css and app.js. Later all these are injected into a copy of index.jsp which is called test.jsp.
The asset gathering, concatenation and injection works splendidly. The minification - not so much...
Any ideas or pointers will be appreciated.

Just for reference useref also changed with v3.0.
Here's my code I got working with the latest versions of gulp-filters and gulp-useref. Might be handy for anyone working through JP's gulp course...
gulp.task('optimise', ['inject', 'fonts', 'images'], function() {
log('Optimising the JavaScript, CSS, HTML');
// $.useref looks for <!-- build:js js/app.js --> in index.html and compiles until <!-- endbuild -->
var templateCache = config.temp + config.templateCache.file;
var cssFilter = $.filter('**/*.css', {restore: true});
var jsFilter = $.filter('**/*.js', {restore: true});
return gulp
.src(config.index)
.pipe($.plumber())
.pipe($.inject(gulp.src(templateCache, {read: false}), {
starttag: '<!-- inject:templates:js -->'
}))
.pipe($.useref({searchPath: './'}))
.pipe(cssFilter)
.pipe($.csso())
.pipe(cssFilter.restore)
.pipe(jsFilter)
.pipe($.uglify())
.pipe(jsFilter.restore)
.pipe(gulp.dest(config.build));
});
Note: I also corrected the spelling of 'optimise' in the function name as I'm English :)

Well, apparently filters no longer work that way, so I'm using gulp-if for that. Under the same premises, the working code is:
gulp.task('optimize', ['inject'], function () {
var assets = $.useref.assets({searchPath: ''});
return gulp
.src(config.indexFile)
.pipe($.rename('test.jsp'))
.pipe($.plumber())
.pipe(assets)
.pipe($.if('*.css', $.csso()))
.pipe($.if('**/lib.js', $.uglify({preserveComments: 'license', mangle: false})))
.pipe($.if('**/app.js', $.ngAnnotate()))
.pipe($.if('**/app.js', $.uglify()))
.pipe(assets.restore())
.pipe($.useref())
.pipe(gulp.dest(config.indexLocation))
;
});

Using grunt-usemin with dynamically generated image paths

I'm using the Yeoman Webapp generator to build my static website.
For my preloader, I have the following snippet (I'm using requireJS for the JS, if that matters).
for(var i = 1; i <= config.numSlides; i++) {
images.push(config.imageBase + i + '.jpg');
}
As you can see, I just generate a path with a number and add .jpg to it. My images are simply called 1, 2, 3, ... .jpg.
However, since Yeoman uses grunt-usemin.. It renames my image files to something like: 7f181706.3.jpg. Because of this, my script cannot find the correct image anymore. Is there a way to solve this?
I was looking through the docs and found something like this:
assetsDir: 'images',
patterns: {
js: [[/(image\.png)/, 'Replacing reference to image.jpg']]
}
would that be an option? I tried it without luck. Not sure what the correct pattern would be.

You can have a better code sample in the test files of this library, concretely: https://github.com/yeoman/grunt-usemin/blob/master/test/test-usemin.js#L233
Where you can find the following code:
it('should allow for additional replacement patterns', function () {
grunt.file.mkdir('images');
grunt.file.write('images/image.2132.png', 'foo');
grunt.log.muted = true;
grunt.config.init();
grunt.config('usemin', {
js: 'misc.js',
options: {
assetsDirs: 'images',
patterns: {
js: [
[/referenceToImage = '([^\']+)'/, 'Replacing image']
]
}
}
});
grunt.file.copy(path.join(__dirname, 'fixtures/misc.js'), 'misc.js');
grunt.task.run('usemin');
grunt.task.start();
var changed = grunt.file.read('misc.js');
// Check replace has performed its duty
assert.ok(changed.match(/referenceToImage = 'image\.2132\.png'/));
});
I hope that helps!