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'))
});
Related
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/'));
});
We have an application running that currently works with both 3D and 2D files, and do not experience any issues when loading 3D files and DWG.
But when trying to load a PDF neither my "onItemLoadSuccess" or "onItemLoadFail" gets run
Autodesk.Viewing.Initializer(options, function onInitialized() {
// Select the container for the viewer
viewerApp = new Autodesk.Viewing.ViewingApplication(container);
// Load settings, i.e extension manager
viewerApp.registerViewer(viewerApp.k3D,
Autodesk.Viewing.Private.GuiViewer3D, { extensions: [ 'ExtensionManager'] });
// Select model to load defined by URN
viewerApp.loadDocument(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
});
}
function onDocumentLoadSuccess(doc) {
var viewables = viewerApp.bubble.search({ 'type': 'geometry' });
if (viewables.length === 0) {
console.error('Document contains no viewables.');
return;
}
// Choose any of the avialble viewables
viewerApp.selectItem(viewables[0], onItemLoadSuccess, onItemLoadFail);
}
function onItemLoadSuccess(viewer, item) {
console.log('onItemLoadSuccess()!');
}
function onItemLoadFail(errorCode) {
console.error('onItemLoadFail() - errorCode:' + errorCode);
}
The PDF file will still open and load, so I am wondering if there might be a different way to run an onItemLoadSuccess function, or we have to do something a bit differently to ensure that our PDF's also gets loaded correctly.
Any help is highly appreciated!
Starting from Viewer v6.3 you can load PDF directly with Autodesk.PDF and pass in callbacks to loadModel like you do other models:
Autodesk.Viewing.Initializer(options, function() {
viewer.start()
viewer.loadExtension('Autodesk.PDF').then(function() {
viewer.loadModel('/path/to/pdf', { page: 1 }, onLoadSuccess, onLoadFail);
});
});
See release notes here: https://forge.autodesk.com/blog/viewer-release-notes-v-63
(Adding to Bryan's answer...)
I wrote a blog post about this. Take a look at the DEMO and sample code to help answer your question about 'onItemLoadSuccess / onItemLoadFail' events.
BLOG: https://forge.autodesk.com/blog/fast-pdf-viewingmarkup-inside-forge-viewer
DEMO: https://wallabyway.github.io/offline-pdf-markup/
Hope that helps!
I want to execute TASK cssmin after scss, but isn't working in this case.
If folder destination is not empty and .css files already compiled with separate task 'scss' then it works. But if folder is empty then cssmin operates in idle and not create min file. Сan you help me?
Log in console:
[08:38:54] Starting 'scss'...
[08:38:54] Finished 'scss' after 13 ms
[08:38:54] Starting 'cssmin'...
[08:38:54] Finished 'cssmin' after 3.56 ms
My gulp tasks:
> gulp.task('scss' , function(){
> gulp.src('app/scss/*.scss')
> .pipe(scss())
> .pipe(gulp.dest('app/css'))
> .pipe(bsync.stream()); });
>
> gulp.task('cssmin' , ['scss'] , function () {
> gulp.src('app/css/libs.css')
> .pipe(cssnano())
> .pipe(rename({
> suffix: '-min'
> }))
> .pipe(gulp.dest('app/css'))});
I solved my problem through adding 'return' before function
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))
;
});
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!