I am using grunt-scss-lint with sucess.
but I wanna exclude a folder or files, but after runt he task still catching the folder, any idea how to exclude the file or directory?
in the docs says:
exclude
Type: String or Array
Default: null
Exclude one or more files from being linted.
grunt task
scsslint: {
allFiles: [
'scss/_main.scss',
],
options: {
config: 'scss/.scss-lint.yml',
reporterOutput: '.tmp/scss-lint-report.xml',
colorizeOutput: true,
compact:false,
},
exclude: [
'scss/vendor/font-awesome/font-awesome.scss'
]
},
any ideas?
Update:
fixed moving exclude to the options.
scsslint: {
allFiles: [
'scss/_main.scss',
],
options: {
config: 'scss/.scss-lint.yml',
reporterOutput: '.tmp/scss-lint-report.xml',
colorizeOutput: true,
compact:false,
exclude: [
'scss/vendor/font-awesome/font-awesome.scss'
]
}
},
The exclude configuration must be moved to within the options object:
options: {
config: 'scss/.scss-lint.yml',
reporterOutput: '.tmp/scss-lint-report.xml',
colorizeOutput: true,
compact:false,
exclude: [
'scss/vendor/font-awesome/font-awesome.scss'
]
},
Related
I am new to grunt. Can anybody tell me how to configure grunt in .NET 6 MVC project?
I want that all the JavaScript files located at "wwwroot\lib\custom\js" folder should get minify and go at this location "wwwroot\js\minified\scripts"
I do not want to bundle everything into one file rather I am looking to minify these files separately like this:
Files at this location wwwroot\js\minified\scripts will look like below:
product.min.js
common-methods.min.js
I would also like to minify my CSS files and put at this "wwwroot\js\minified\css" location. I found this link helpful but somehow it is not working for me. Also that would be much helpful, if somebody can tell me how to configure "grunt-contrib-watch" as well?
Here is my package.json
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"grunt": "1.5.3",
"grunt-contrib-clean": "2.0.1",
"grunt-contrib-jshint": "3.2.0",
"grunt-contrib-concat": "2.1.0",
"grunt-contrib-uglify": "5.2.2",
"grunt-contrib-watch": "1.1.0"
}
}
and my gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON("package.json"),
uglify: {
options: {
compress: true
},
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask("default", ["uglify"]);
}
Can anybody help me configure this?
Your gruntfile.js will look this
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON("package.json"),
uglify: {
minifyJs: {
files: [{
expand: true,
cwd: 'wwwroot/lib/custom/js/',
src: ['**/*.js'],
dest: 'wwwroot/js/minified/scripts/',
ext: '.min.js',
extDot: 'first'
},],
},
},
cssmin: {
webStyles: {
files: [{
expand: true,
cwd: 'wwwroot/lib/custom/css/',
src: ['**/*.css'],
dest: 'wwwroot/js/minified/css/',
ext: '.min.css'
}]
}
},
watch: {
minifyJs: {
expand: true,
files: "wwwroot/lib/custom/js/**/*.js",
tasks: ["uglify:minifyJs"]
},
webStyles: {
expand: true,
files: "wwwroot/lib/custom/css/**/*.css",
tasks: ["cssmin:webStyles"]
},
options: {
spawn: false,
event: ['all']
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask("default", ["watch"]);
}
You can refer the documentation for more information.
I have a sitemap.xml file in public folder. When I build the React application, the sitemap.xml file is not present in the dist/build folder.
What Webpack configuration is needed to achieve that? How does robots.txt need to be set up?
Here is the webpack-config for serving a file to build folder witha a custom name
module: {
rules: [
{
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
},
],
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(?:ico|gif|png|jpg|jpeg|xml)$/i,
type: 'asset/resource',
},
{
test: /\.xml/,
type: 'asset/resource',
generator: {
filename: 'sitemap.xml',
},
},
{
test: /\.txt/,
type: 'asset/resource',
generator: {
filename: 'robots.txt',
},
},
{
test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
type: 'asset/inline',
},
],
},
Finally make sure you import that file inside your react application or else it will not be served to build folder
I'm trying to enable vendor prefixes with Next.js, but they're not working. I'm using SCSS modules, and tried also with normal CSS but this is not working.
EDIT: I'm using a custom PostCSS file:
module.exports = {
plugins: [
"postcss-flexbugs-fixes",
[
"postcss-preset-env",
{
autoprefixer: {
flexbox: true,
grid: "autoplace",
},
stage: 3,
features: {
"custom-properties": true,
},
},
],
],
};
You will just need to adjust the browserslist in your package.json.
{
"browserslist":[
......
]
}
Try Visiting here for more info in browserslist:
https://github.com/browserslist/browserslist
I am using https://github.com/wbkd/webpack-starter for my project
I do have svg and png images that referenced in my html file like <img src="/public/image.png"/>
Instead of loading image using src path I want to inject image as base64 content to my html file to improve the page performance and to minify the number of server requests.
So I wonder how would you do that?
UPDATE:
here is what I did, but that does not work
npm install url-loader --save-dev
and add this configuration to production config:
module: {
rules: [
{
test: /\.(png|jpg|gif|svg)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: false,
},
},
],
},
]
}
I tried to play with limit values but won't help.
Any ideas ?
UPDATE:
that is my current rules config, but nothing works, I also installed html-loader but no effect:
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.s?css/i,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader',
],
},
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: false,
},
},
],
},
{
test: /\.html$/i,
loader: 'html-loader',
},
],
Here's a few steps you should follow to sort your problem out:
Add html-loader to your webpack.config.prod.js:
webpack.config.prod.js
{
test: /\.html$/i,
loader: 'html-loader',
},
Fix your src of your <img /> to use the relative path instead of absolute path which doesn't work:
<img src="../public/image.png"/> // this is incorrect `/public/image.png`
Finally, add a publicPath to output in webpack.common.js to make it work properly with html-webpack-plugin:
webpack.common.js
{
output: {
// ...
publicPath: '/',
},
}
Make sure to set url-loader litmit to true. According to their docs, setting it to true is the default option and there's no limit to a file's size to be transformed into base64.
Setting it to false will not transform images to base64.
module: {
rules: [
{
test: /\.(png|jpg|gif|svg)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: true,
},
},
],
},
]
}
Also, in order for images to be handled by webpack, you need to import them.
import MyImage from '../public/image.png'
How can we set common "folder_exclude_patterns" for all folder paths in a project.
For example, in the following project configuration, the folder_exclude_patterns has to be repeated for each of the folder path. Can we have it at a common single place in the configuration, instead of specifying under each of the path setting?
{
"folders":
[
{
"follow_symlinks": true,
"path": "/path/to/folder/1",
"folder_exclude_patterns": ["node_modules", "target", ".sass-cache"]
},
{
"follow_symlinks": true,
"path": "/path/to/folder/2",
"folder_exclude_patterns": ["node_modules", "target", ".sass-cache"]
},
{
"follow_symlinks": true,
"path": "/path/to/folder/3",
"folder_exclude_patterns": ["node_modules", "target", ".sass-cache"]
}
]
}
You are making adjustment in Project settings. Use User settings instead.
Probably this is what you trying to do:
Go to
Preferences > settings
Look at "folder_exclude_patterns" property below I added "node_modules" to hide those folders from sublime you can go ahead and also add "target" and ".sass-cache" folders to hide them.
{
"binary_file_patterns":
[
"*.dds",
"*.eot",
"*.gif",
"*.ico",
"*.jar",
"*.jpeg",
"*.jpg",
"*.pdf",
"*.png",
"*.swf",
"*.tga",
"*.ttf",
"*.zip",
"node_modules/**"
],
"color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme",
"file_exclude_patterns":
[
"*.pyc",
"*.pyo",
"*.exe",
"*.dll",
"*.obj",
"*.o",
"*.a",
"*.lib",
"*.so",
"*.dylib",
"*.ncb",
"*.sdf",
"*.suo",
"*.pdb",
"*.idb",
".DS_Store",
"*.class",
"*.psd",
"*.db",
"*.sublime-workspace"
],
"folder_exclude_patterns":
[
"*.phpintel",
".svn",
".git",
".hg",
"CVS",
"node_modules",
],
"font_size": 12,
"ignored_packages":
[
"Vintage"
],
"ignored_words":
[
"autoload",
"config",
"php"
],
"show_encoding": true,
"spell_check": false,
"tab_size": 2,
"translate_tabs_to_spaces": true,
"word_wrap": false
}
The sublimetext plugin ToggleExclude (https://sublime.wbond.net/packages/ToggleExclude) solves this issue.