I use rollup with rollup-plugin-scss plugin in the project to bundle css. Is it possible to generate both .css and .min.css using this plugin or some other plugins?
plugins: [
scss({
output: path.resolve(__dirname, 'projects/project_name/main.css'),
})
]
I tried to add outputStyle: "compressed" but this make only compressed version, not both.
It is not possible out of the box but you hook into the output option that also take a function as option and write both files manually (including a compression step). In the sample code below I used clean-css but there are plenty of other packages available.
scss({
output: function (styles, styleNodes) {
fs.writeFileSync('bundle.css', styles)
const compressed = new CleanCss().minify(styles).styles;
fs.writeFileSync('bundle.min.css', compressed)
}
})
Note that this setup does not have any logging or filesizes or anything as you get it from the regular plugin, but this is something that can be added fairly easily into the function.
Related
I have some pdf files on my website, lets call them a,b,c,d (all ending with .pdf).
These files don't sit all under the same path (there is a total of 3 different directories), for example we have
https://example.com/first_dir/a.pdf
https://example.com/first_dir/b.pdf
https://example.com/second_dir/c.pdf
https://example.com/third_dir/d.pdf
I have the following alias dictionary:
name_conversions = {
'first_name' : 'first_dir/a.pdf'
'other_name' : 'first_dir/b.pdf'
'another_name' : 'second_dir/c.pdf'
'yet_another_name' : 'third_dir/d.pdf'
}
and I want to create redirections according to this dictionary, so that when we access https://example.com/first_name we get redirected to https://example.com/first_dir/a.pdf, and same goes for the other entries.
How can this be done in webpack? If this can't be done in webpack what are the alternatives, that hopefully don't require me making a lot of new files, one per pdf, and don't require creating copies of these pdfs.
I've seen people use webpack proxy for this, but this is not for production from what I understood, and only for development.
Update: I found a plugin for doing redirects, but I can seem to find how to use it.
I found out I can use the package redirect-webpack-plugin.
All I need to do is the following:
module.exports = {
...
plugins: [
new RedirectWebpackPlugin({
redirects: name_conversions
})
...
]
...
}
I'm not sure this is even possible, but it looks like some of the moving parts are there.
GOAL:
Create a library of single file Vue 3 components that will compile into separate chunks using Vite, and be dynamically/async loaded at runtime. The app itself will load, then load up a directory of individually chunk'd elements to put in a toolbox, so afterward each element could be updated, and new ones could be added by putting new chunks in the same path.
So far, I can create the separate chunks within the vite.config as follows:
...
build: {
rollupOptions: {
output: {
...buildChunks()
}
}
}
...
The buildChunks function iterates over SFC files in the ./src/toolbox path and returns an object like...
{
'toolbox/comp1':['./src/toolbox/comp1.vue'],
'toolbox/comp2':['./src/toolbox/comp2.vue'],
'toolbox/comp3':['./src/toolbox/comp3.vue'],
...
}
This all works, but I'm not sure how to make that next leap where the server code dynamically loads all of those generated chunk files without explicitly listing them in code. Also, since the Vite build adds an ID in the file name (e.g. comp.59677d29.js) on each build, referencing the actual file name in the import can't be done explicitly.
So far what I've considered is using defineAsyncComponent(()=>import(url)) to each of the files, but I'd need to generate a list of those files to import...which could be done by building a manifest file at build time, I guess.
Any suggestions? Is there a better approach?
I migrated a 3rd-party tool's gradle.build configs, so it uses android gradle plugin 3.5.3 and gradle 5.4.1.
The build goes all smoothly, but when I'm trying to make an .aab archive, things got broken because the toolchain expects the output .aab file to be named MyApplicationId.aab, but the new gradle defaults to output MyApplicationId-release.aab, with the buildType suffix which wasn't there.
I tried to search for a solution, but documentations about product flavors are mostly about adding suffix. How do I prevent the default "-release" suffix to be added? There wasn't any product flavor blocks in the toolchain's gradle config files.
I realzed that I have to create custom tasks after reading other questions and answers:
How to change the generated filename for App Bundles with Gradle?
Renaming applicationVariants.outputs' outputFileName does not work because those are for .apks.
I'm using Gradle 5.4.1 so my Copy task syntax reference is here.
I don't quite understand where the "app.aab" name string came from, so I defined my own aabFile name string to match my toolchain's output.
I don't care about the source file so it's not deleted by another delete task.
Also my toolchain seems to be removing unknown variables surrounded by "${}" so I had to work around ${buildDir} and ${flavor} by omitting the brackets and using concatenation for proper delimiting.
tasks.whenTaskAdded { task ->
if (task.name.startsWith("bundle")) { // e.g: buildRelease
def renameTaskName = "rename${task.name.capitalize()}Aab" // renameBundleReleaseAab
def flavorSuffix = task.name.substring("bundle".length()).uncapitalize() // "release"
tasks.create(renameTaskName, Copy) {
def path = "$buildDir/outputs/bundle/" + "$flavorSuffix/"
def aabFile = "${android.defaultConfig.applicationId}-" + "$flavorSuffix" + ".aab"
from(path) {
include aabFile
rename aabFile, "${android.defaultConfig.applicationId}.aab"
}
into path
}
task.finalizedBy(renameTaskName)
}
}
As the original answer said: This will add more tasks than necessary, but those tasks will be skipped since they don't match any folder.
e.g.
Task :app:renameBundleReleaseResourcesAab NO-SOURCE
I am playing with Gulp.js & npm recently, it's great. However, I do not really get the idea of npm as a package manager for packages which will get pushed for dist.
Let's go with an example.
I want to download the latest jquery, bootstrap and font-awesome so I can include them into my project. I can simply download them from their websites and get the files to include. Another option seems to be a packet manager, i.e. NPM.
However, my node_modules directory is huge due to other packages such as gulp, and it's not nested at all. What would be the easiest way to move selected packages to another dir - for example src/vendors/
I was trying to achieve that by gulp task simply copying specified files from node_modules and moving them to a specified dir, nonetheless in the long run it's almost the same as manually copying files since I have to specify not only the input directory, but also the output directory for each single package.
My current solution:
gulp.task('vendors', function() {
var jquery = gulp.src(vendors.src.jquery)
.pipe(gulp.dest(vendors.dist.jquery));
var bootstrap = gulp.src(vendors.src.bootstrap)
.pipe(gulp.dest(vendors.dist.bootstrap));
return merge(jquery, bootstrap);
});
vendors = {
src: {
jquery: 'node_modules/jquery/dist/**/*',
bootstrap: 'node_modules/bootstrap/dist/**/*'
},
dist: {
jquery: 'src/resources/vendors/jquery',
bootstrap: 'src/resources/vendors/bootstrap'
}
}
Is there an option to do it faster and/or better?
There's no need to explicitly specify the source and destination directory for each vendor library.
Remember, gulp is just JavaScript. That means you can use loops, arrays and whatever else JavaScript has to offer.
In your case you can simply maintain a list of vendor folder names, iterate over that list and construct a stream for each folder. Then use merge-stream to merge the streams:
var gulp = require('gulp');
var merge = require('merge-stream');
var vendors = ['jquery/dist', 'bootstrap/dist'];
gulp.task('vendors', function() {
return merge(vendors.map(function(vendor) {
return gulp.src('node_modules/' + vendor + '/**/*')
.pipe(gulp.dest('src/resources/vendors/' + vendor.replace(/\/.*/, '')));
}));
});
The only tricky part in the above is correctly figuring out the destination directory. We want everything in node_modules/jquery/dist to end up in src/resources/vendors/jquery and not in src/resources/vendors/jquery/dist, so we have to strip away everything after the first / using a regex.
Now when you install a new library, you can just add it to the vendors array and run the task again.
I'm having a hard time locating specific style rules in less, what is the ideal workflow for quickly finding and modifying the rules and structure of the default less files?
The Magento Documentation is pretty helpful here - http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html
Source maps are probably the best LESS debugging tool.
For client side compilation configure options in lib/web/less/config.less.js.
The option you want is:
dumpLineNumbers
Type: String Options: ''| 'comments'|'mediaquery'|'all' Default: ''
When set, this adds source line information to the output css file. This helps you debug where a particular rule came from.
- http://lesscss.org/usage/#using-less-in-the-browser
If you want server side compilation, you can use grunt which is built in to Magento 2. Checkout the dev/tools/grunt/configs/less.js file, it shows
var lessOptions = {
options: {
sourceMap: true,
strictImports: false,
sourceMapRootpath: '/',
dumpLineNumbers: false, // use 'comments' instead false to output
...
The documentation will step you through using Grunt, or setting up client side less compilation.