I have a Gruntfile.js, where I have a string I's repeating many times. So I decided to proceed with a variable, hence I introduced var file_path.
module.exports = function(grunt) {
'use strict';
var today = new Date();
var year = today.getFullYear();
var file_path = 'here/there/';
grunt.initConfig({
jshint: {
all: [
'<%= file_path %>/assets/js/app.js',
'<%= file_path %>/admin/assets/js/admin.js',
]
},
});
require('load-grunt-tasks')(grunt);
grunt.registerTask('default', ['jshint']);
};
But it's not working. Throwing the following error:
Running "jshint:all" (jshint) task
Warning: An error occurred while processing a template (file_path is not defined). Use --force to continue.
When I changed <%= file_path %> to <%= this.file_path %>, the process runs but the paths are not resolved.
Running "jshint:all" (jshint) task
>> 0 files linted. Please check your ignored files.
With other registered tasks it's confirmed that, No source files were found..
BTW I incorporated year in another task that is working fine. Attached a screenshot:
So, I tried the same syntax in jshint task, like below:
all: [
file_path + 'assets/js/app.js',
file_path + 'admin/assets/js/admin.js',
]
It's producing the same result of not linting any file at all.
However I tried the following console.log, outside of grunt.initConfig():
grunt.log.write(file_path + 'assets/js/app.js');
It's displaying the correct concatenated path to the file: here/there/assets/js/app.js.
How can I incorporate variables in Gruntfile?
If you are wanting to use Template strings like this:
all: [
'<%= file_path %>/assets/js/app.js',
'<%= file_path %>/admin/assets/js/admin.js',
]
Then configure your Gruntfile.js to this:
module.exports = function(grunt) {
'use strict';
var today = new Date();
var year = today.getFullYear();
grunt.initConfig({
file_path: 'here/there',
// ^-- Note: there is no trailing forward slash.
jshint: {
all: [
'<%= file_path %>/assets/js/app.js',
'<%= file_path %>/admin/assets/js/admin.js',
]
}
});
require('load-grunt-tasks')(grunt);
grunt.registerTask('default', ['jshint']);
};
Related
npm run build
Is creating multiple 'chunk' files, such as:
/dist/js/app.*.js
/dist/js/chunk-2413.js
/dist/js/chunk-5133.js
My goal is to have them all within a single app.*.js file!
I've set 'splitChunks' to false in vue.config.js, however this won't put all the chunks in the same app.*.js file, since I'm importing a bunch of text files into the project (I'm opting for text files over internal configuration variables as I prefer this format for the purpose of the application).
Here's my code that successfully returns promises and loads the data from the text files into the allContents array:
const textFiles = require.context('../assets/textfiles', true, /\.txt$/i);
var self = this;
var fileContents = textFiles .keys();
fileContents.forEach(function (item, index){
console.log(item+' - '+index);
var val = import('raw-loader!../assets/textFiles '+item.replace('.',''));
val.then( (resp) => {
console.log(resp.default);
self.allContents.push(resp.default);
});
});
The data from these text files, is causing the 'dist/js/chunk...' files to be created. What I need to is stop them from doing that - but how? Is there a way to stop this behaviour?
Update to include vue.config.js:
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')
module.exports = {
publicPath: '',
productionSourceMap: false,
css: {
extract: false,
},
configureWebpack: {
optimization: {
splitChunks: false
},
plugins: [
new ScriptExtHtmlWebpackPlugin({
preload: /\.js$/,
defaultAttribute: 'async'
})
]
},
chainWebpack: config => {
config.module
.rule('raw')
.test(/\.txt$/)
.use('raw-loader')
.loader('raw-loader')
.end()
}
}
Sample data from one of the chunk js files:
(it's just loading in a txt file which has contents like '### Config: ### blah blah')
(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0a2dc4"],{"005c":function(e,t,n){"use strict";n.r(t),t["default"]="export default \"##########\\r\\n# Config:\\r\\n##########\\r\\n\\r\\n$type: Chat\";"}}]);
Using raw-loader with "import" syntax is the reason make it autosplitting. And the path to textFiles in your code has a space at the end, I dont know is it a typo
var val = import('raw-loader!../assets/textFiles '+item.replace('.',''));
You can try change to this way. It may help as a workaround solution to prevent splitting
fileContents.forEach(function (item, index) {
console.log(item + ' - ' + index)
var val = require('raw-loader!./assets/textFiles' + item.replace('.', ''))
self.allContents.push(val.default)
})
Hope this help
My app used to work fine until I updated VueJS this morning. Now when I build, it shows the following error:
Error: Conflict: Multiple assets emit to the same filename img/default-contractor-logo.0346290f.svg
There's only one file like this in the repo.
Here's my vue.config.js:
module.exports = {
baseUrl: '/my/',
outputDir: 'dist/my',
css: {
loaderOptions: {
sass: {
data: `
#import "#/scss/_variables.scss";
#import "#/scss/_mixins.scss";
#import "#/scss/_fonts.scss";
`
}
}
},
devServer: {
disableHostCheck: true
}
};
I tried webpack fixes recommended in similar cases, but non helped.
I had the same error when importing SVG files using dynamically generated path in the require statement:
const url = require("../assets/svg/#{value}");
<img src={{url}} />
In this case file-loader processes all SVG files and saves them to the output path. My file-loader options were:
{
loader: "file-loader",
options: { name: "[name].[ext]" }
}
The folders structure has duplicate file names, something like this:
assets
|__ one
|____ file.svg
|__ two
|____ file.svg
In this case file-loader saves both file.svg files to the same output file: build/assets/file.svg - hence the warning.
I managed to fix it by adding [path] to the name option:
{
loader: "file-loader",
options: { name: "[path][name].[ext]" }
}
The answer by #ischenkodv is definitely correct, but because of my inexperience with webpack, I needed a little more context to use the information to fix the problem.
For the benefit of anyone else in the same situation, I'm adding the following details which I hope will be useful.
This section of the Vue.js documentation was particularly helpul:
VueJS - Modifying Options of a Loader
For the TL;DR fix, here is the relevant chunk of my vue.config.js:
// vue.config.js
module.exports = {
// ---snip---
chainWebpack: config =>
{
config.module
.rule('svg')
.test(/\.svg$/)
.use('file-loader')
.tap(options =>
{
return { name: "[path][name].[ext]" };
});
}
// ---snip---
};
In my project it was the flag-icon-css NPM package that was causing the Multiple assets emit to the same filename conflict errors. The above update to the vue.config.js file resolved the problem for me.
I suspect that the regular expression in the test could be tightened up to target just the items in the flag-icon-css package rather than matching all SVG files, but I haven't bothered since it's not causing any adverse effects so far.
I am using vue-cli3, when i build using npm run build -- --mode=production, it gives 2 css files and 2 js files.
Everytime i make a code change the name of the file also changes like app.de90cdf7.js and chunk-vendors.a9204242.js.
Is there a way in vue-cli to hardcode the files names as app.js and chunk-vendors.js ?
I'm little late to the party. We can chain webpack to apply name changes.
Using version #vue/cli 5.0.4 in year 2022
const { defineConfig } = require("#vue/cli-service");
module.exports = defineConfig({
transpileDependencies: true,
chainWebpack : (config) => {
config.output.filename('[name].js');
},
css: {
extract: {
filename: '[name].css',
chunkFilename: '[name].css'
}
}
});
One of my javascript files is using the lodash template syntax:
const deliveryClient = new DeliveryClient({
enablePreviewMode: <%= options.enablePreviewMode %>,
projectId: '<%= options.projectId %>',
previewApiKey: '<%= options.previewApiKey %>',
defaultLanguage: '<%= options.defaultLanguage %>',
enableAdvancedLogging: <%= options.enableAdvancedLogging %>,
baseUrl: '<%= options.baseUrl %>',
typeResolvers: typeResolvers
});
But when i run rollup -c i'm getting a "unexpected token" error. Is there a way to tell rollup to ignore (just put it in the output file) some lines of code?
Or is there an other/better way to deal with lodash template syntax within RollupJS?
I just want to above code snippet to be in my final output!
I fixed it by using the rollup-plugin-replace plugin.
In my javascript I changed my code into the following:
const deliveryClient = new DeliveryClient('KENTICOOPTIONS');
and in the rollup.config.js I added the plugin with the following configuration:
replace({
include: 'lib/templates/plugin.template.js',
KENTICOOPTIONS: '<%= serialize(options) %>'
})
So this gives the final output of:
const deliveryClient = new DeliveryClient('<%= serialize(options) %>');
Which is exactly what i needed!
I met an issue where I need to start my express server with arguments using grunt-express-server. How could I do that?
I tried to use the option "args" but it seems it doesn't work for me. Here are some simple codes for this issue.
In my Gruntfile.js, I just did this:
grunt.initConfig({
pkg: grunt.file.readJSON('proxy.json'),
express: {
dev: {
options: {
script: 'testServer.js',
background: false,
args: ['test.json'], // I assume it may run "node testServer.js test.json"
}
}
})
And in my testServer.js file, I just want to print out the arguments:
var m = require('./startServer.js');
process.argv.forEach(function (val, index, array) {
console.log(array);
});
m.start();
However, everytime when I run "grunt express:dev", the server could be started, however, it always prints out
[ 'node', '/usr/local/bin/grunt', 'express:dev' ]
instead of something like
[ 'node', 'testServer.js', 'test.json' ]
Do you have any idea how I could solve this issue?