As I am editing the sass task of my Gruntfile.js I don't understand the difference between the different properties (e.g. dist, dev and options) of the sass task object.
For example, in the code below the sass object contains two properties, options and dist. I have also seen a dev property in some other examples of the sass task.
sass: {
options: {
includePaths: ['bower_components/foundation/scss']
},
dist: {
options: {
outputStyle: 'compressed'
},
files: {
'css/app.css': 'scss/app.scss',
// our component file on the right
// file to save on the left
'css/top-bar.css' : 'scss/topbar.scss'
}
}
},
At the grunt-sass Github documentation only the options property is discussed. There is no mention of dist and dev but I see that options can appear in dist and dev. Logic tells me that dist is for the final build and that dev is for development. I'm not sure though and also not sure how to use them. Any ideas?
When configuring a task, you can have many targets, like dist or dev (you can name them whatever you want). Each target can have its own settings, which obviously depends on the task.
I'm not sure which task you're using (maybe grunt-sass?), but the outermost options is probably applied to all targets.
See this part of Grunt's documentation.
Related
vite build uses esbuild to transform both the package dependencies (node modules) as well as the app source code into the target JavaScript specification, i.e. es2015.
I observe that vite/esbuild re-transform the entire sources in ./node_modules every time vite build is run.
How can this build stack be used to keep and reuse the previously transformed files, at least for the entire ./node_modules folder (given dependencies didn't change of course) so that subsequent vite build command invocations run significantly faster?
One way to improve the performance of subsequent Vite build command invocations is by using a caching mechanism. You can use a caching tool such as cache-loader or hard-source-webpack-plugin to cache the transpilation results of the node modules.
This will allow Vite to reuse the previously transpiled files for the node modules, as long as the dependencies haven't changed.
This can greatly speed up the build process.
You can also try to configure esbuild to only transpile the changed files instead of the entire codebase using the -w or --watch option when running the esbuild command. This option tells esbuild to watch the input files and only transpile the files that have been modified.
In Vite, you can configure the esbuild plugin to use the --watch option by adding the following to your vite.config.js file:
const esbuildConfig = {
watch: true,
};
module.exports = {
esbuild: esbuildConfig,
};
Examples :
cache-loader:
Install the package:
npm install cache-loader --save-dev
In your vite.config.js file, configure the cache-loader to be used for transpiling the node modules by adding it as a rule in the build object:
module.exports = {
build: {
...
css: {
...
},
js: {
...
loaderOptions: {
cache: true,
cacheDirectory: 'node_modules/.cache'
}
},
...
}
}
Run your build command ( vite build )
hard-source-webpack-plugin:
install the package:
npm install hard-source-webpack-plugin --save-dev
In your vite.config.js file, import the plugin and add it to the build.plugins array:
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
module.exports = {
build: {
...
plugins: [
new HardSourceWebpackPlugin()
],
...
}
}
Run your build command (vite build)
These examples, as you asked in your comment, are for Vite versions 2.5.8 and 3.x. However, in order to use them with Vite 3.x you need to update the build config to match the new format.
Please don't hesitate to write a comment if you still have a problem or questions!
I'm using composer to manage a WordPress project and don't need some plugins in development. So basically the opposite of require-dev.
If there was a name for it I would guess it to be require-production or exclude-dev. So requirements in this object would only get installed if composer --production was ran. That's not a real flag, just trying to make the path to the solution clear.
"require-production": {
"example/caching-plugin": "1.0"
}
Is there a way to do this?
I can do this with a php function, but would really like to keep my dependency management in one location
As for workaround, you can define replace property to specify list of packages to ignore, e.g.
{
"require": {
"example/caching-plugin": "*"
},
"replace": {
"example/ignore-this": "*"
}
}
This tells Composer that you're replacing these dependencies, so they won't be downloaded.
Another way is to perform code patching by adding this section:
"extra": {
"patches": {
"vendor/package": {
"Bug #1234: Something is wrong": "patches/1234.diff"
}
}
}
For above feature to work, you need to install cweagans/composer-patches package first, e.g.
composer require "cweagans/composer-patches:~1.0"
Then you can provide different patch files on different branches for certain environments.
There is also scripts property where you can invoke some scripts or commands which can check your environment and depending on the hostname, can invoke certain commands to do some post-processing such as removing some files or folders.
So I made a library that I can bower install using a direct link. I can use this library from another internal application by adding the library name in the dependency of the bower.json file. When other internal application does a bower update, the changes I made on the library will be applied to their application. This part is working very well.
Now, I'd like the other software devs to have freedom to change the styles. They can create css file directly and that will work. However, it's a hackish route. I can provide them the same settings file that I use.
So i tried putting that file in the main section of the bower.json but wiredep is processing it. I put it in exclude and the error is gone when I run gulp.
"main": [
"dist/stylesheet.css",
"src/_settings.scss"
],
this is the code that prevented it from being parsed by wiredep
wiredep: {
directory: 'bower_components',
exclude: ['css/foundation.css','src/_settings.scss']
}
Am I right that I'll have to create a new gulp task and put 'src/_settings.scss' as gulp.src like this
gulp.task('sasstask2', function () {
return gulp.src('src/_settings.scss')
.pipe($.sass())
.pipe(gulp.dest('src/css'));
});
I also like the generate css to be injected to index.html but not sure how to do it? Will wiredep automatically inject it to index.html?
The angular generator has a dependency on compass and thus ruby when using SASS.
Two questions:
Is it possible/practical to remove the ruby dependency by using something like node-sass?
If so, how do I accomplish #1 and still use angular generator to generate controllers, routes, services, etc in the future?
If you are using the Yeoman Angular generator and you wish to use SASS/SCSS without depending on Ruby, you could use the grunt-sass Grunt module.
Yeoman is essentially a project set-up with Grunt so you can just add whichever Grunt modules you need. If you are unfamiliar with Grunt, you can read the documentation here.
Essentially, you can set up the Grunt configuration for your SASS task, then register the task in your generated project's Gruntfile.js:
grunt.initConfig({
sass: {
options: {
sourceMap: true
},
dist: {
files: {
'main.css': 'main.scss'
}
}
}
});
grunt.registerTask('default', ['sass']);
You should note that this Grunt module uses Node SASS for CSS compilation instead of Compass, so you may be missing out on some Compass mixins you may be used to.
I'm using grunt-contrib-compass to compile my SCSS files, and here's the Gruntfile configuration for the same.
compass: {
dist: {
options: {
watch: true,
imagesDir: 'web/assets/img',
sassDir: 'web/assets/scss',
cssDir: 'web/assets/css'
}
}
}
As you can see that I'm using Compass' "watch" option to watch for files for change. So all files within scss folder are compiled and eventually, one main file styles.css is generated within css folder. While I can use outputStyle: "compressed" option for Compass task to generate all CSS files minified, I want those files to remain expanded.
So is there anyway I can generate original files as expanded while an additional file .min.css which is compressed?
An alternative solution I have as of now is to avoid using watch of compass, and rely on grunt-contrib-watch and grunt-contrib-cssmin instead. But grunt-contrib-watch is much slower compared to that of Compass.
I cannot have another watch task running to monitor CSS files and run cssmin when they're changed, since starting compass with watch: true will block any other following tasks (unless I use something like Grunt-concurrent, which I want to avoid).
Any help is appreciated.