I'm just toying around with React and have a basic setup using grunt and grunt-browserify, but I'm getting a parse error. Anyone know a solution for this? Side note - the task runs fine when I don't use react/jsx.
With a basic component:
var HelloWorld = React.createClass({
render: function(){
return (
<div>
Hello World!
</div>
)
}
});
React.render(<HelloWorld />, document.getElementById('app'));
I get this error:
>> File "assets/javascripts/app.js" changed.
Running "browserify:dist" (browserify) task
>> /Users/username/www/reactor/assets/javascripts/app.js:4
>> <div>
>> ^
>> ParseError: Unexpected token
Warning: Error running grunt-browserify. Use --force to continue.
And here is the grunt task:
browserify: {
dist: {
files: {
'public/javascripts/app.js' :
[
'assets/javascripts/components/**/*.js',
'assets/javascripts/app.js'
]
}
}
},
I didn't go with Dhiraj's answer, but that led me to using reactify.
browserify: {
options: {
transform: ['reactify'],
extensions: ['.jsx'],
debug: true
},
dist: {
files: {
'public/javascripts/app.js' :
[
'assets/javascripts/components/**/*.jsx',
'assets/javascripts/app.jsx'
]
}
}
},
The HelloWorld class is jsx so grunt-browserify needs to transform jsx to js using transform option.
browserify: {
dist: {
options: {
transform: [ require('grunt-react').browserify ] // <-- this one
},
client: {
src: [assets/javascripts/components/**/*.js, assets/javascripts/app.js], // sources files
dest: 'public/javascripts/app.js' // output file
}
}
}
Here is a reference
Hope this helps.
Related
I am starting my first project with React.
To start with, I just have a single component LikeButton.tsx, which is injected into the body. I am trying to apply some styles to this button:
import './LikeButton.css';
LikeButton.css:
button {
color: red;
}
Here is my webpack.config.ts:
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx|tsx|ts)$/,
exclude: /(node_modules|dist)/,
use: 'babel-loader'
}, {
test: /\.css$/i,
use: [
'style-loader', 'css-loader'
]
}
]
},
...
};
When I run webpack, I end up with the following error:
ERROR in src/components/LikeButton.css:1:7
[unknown]: Parsing error: ';' expected.
> 1 | button {
| ^
2 | color: red;
3 | }
The css syntax is correct, so I am guessing the css is being interpreted as javascript/typescript somewhere, but I cannot see where due to the [unknown]-part in the error message.
The loader
What is happening here?
Instead of removing ForkTsCheckerWebpackPlugin which of course you may need for typescript / React combination to work properly, specify the files that you want eslint to check
eslint: {
files: './src/**/*.{ts,tsx,js,jsx}',
},
this tells eslint to check javascript and typescript files only, thus removing the css error.
It was the Fork TS Checker Webpack Plugin that caused the issue. By removing it from module.exports.plugins in webpack.config.ts, the error disappeared:
module.exports = {
...
plugins: [
new ForkTsCheckerWebpackPlugin({
async: false,
eslint: {
files: "./src/**/*",
},
}),
new MiniCssExtractPlugin(),
],
}
...
I've got several projects that each use an identical Gruntfile to run tasks and put the output in their own dist folder. Folder setup:
MyProjects
- Project1
- src
- dist
- Project2
- src
- dist
.....
I can't figure out how to run Grunt at the top level (MyProjects) and still have the output generated in the correct dist folder dynamically.
Is there a way I can have Grunt put the output in the correct dist folder without having to hard code it into the Gruntfile? Something like:
dist: {
files: {
// destination : source js
'<% ProjectName %>/dist/app.js': '<% ProjectName %>/src/app.js'
},
Thanks
module.exports = function (grunt) {
require('load-grunt-tasks')(grunt);
// Project configuration.
grunt.initConfig({
watch: {
scripts: {
files: ['src/**/*.js'],
tasks: ['browserify', 'file_append', 'concat'],
options: {
spawn: false
}
},
sass: {
files: "src/scss/*.scss",
tasks: ['sass', 'file_append', 'concat']
}
},
sass: {
dist: {
options: {
style: 'expanded'
},
files: {
// destination // source file
"format/css/styles.css": "src/scss/styles.scss"
}
},
options: {
sourcemap: "none",
style: "compact",
noCache: true
}
},
file_append: {
default_options: {
files: [
// Development build
{
append: "",
prepend: "",
input: "format/app.js",
output: "format/dev.app.js"
},
{
append: "</style>`)",
prepend: "document.body.insertAdjacentHTML('afterbegin', `\n<style>\n",
input: "format/css/styles.css",
output: "format/css/dev.styles.html"
},
// Production build
{
append: "</script>",
prepend: "<script>\n",
input: "format/app.js",
output: "format/prod.app.html"
},
{
append: "</style>",
prepend: "<style>\n",
input: "format/css/styles.css",
output: "format/css/prod.styles.html"
}
]
}
},
concat: {
options: {
seperator: '\n'
},
// Development build
dev: {
src: ['format/dev.app.js', 'format/css/dev.styles.html'],
dest: 'dev/dev.app.js'
},
// Production build
prod: {
src: ['format/prod.app.html', 'format/css/prod.styles.html'],
dest: 'dist/prod.app.html'
}
},
browserify: {
dist: {
files: {
// destination for transpiled js : source js
'format/app.js': 'src/app.js'
},
options: {
transform: [
[
'babelify', {
presets: "es2015",
comments: false,
plugins: "transform-object-rest-spread"
}
]
],
browserifyOptions: {
debug: false
}
}
}
}
});
grunt.registerTask('default', [
'sass',
'browserify:dist',
'file_append',
'concat',
'watch'
]);
};
There's a couple ways you can tackle this.
One option is to overload the arguments you pass to the task & include the folder name you wish to target.
grunt sass:dist:Project1
The additional argument is accessible via lodash templates which are a part of the GruntJS framework, and allows the configuration to be set at the time the task is ran:
sass: {
dist: {
options: {
style: 'expanded'
},
files: {
// destination // source file
"MyProjects/<%= grunt.task.current.args[0] %>/format/css/styles.css": "MyProjects/<%= grunt.task.current.args[0] %>/src/scss/styles.scss"
}
},
options: {
sourcemap: "none",
style: "compact",
noCache: true
}
}
This approach works in the context of the function that's executing, but it wouldn't continue to pass the args to the next task. To do that, we need to add a custom task which will set a configuration object before executing the task list:
grunt.registerTask("build", (project) => {
const buildConfig = { project };
grunt.config.set("build", buildConfig);
grunt.task.run([
'sass',
'browserify:dist',
'file_append',
'concat',
'watch'
]);
});
Now when we run grunt build:Project1, your custom task build will run and set the property we passed in the grunt config object. We can then reference that value in our other grunt config objects using lodash like we did for the first option. To access config values with lodash templates, we just have to provide the config pointer in json notation:
files: {
"MyProjects/<%= build.project %>/format/css/styles.css": "MyProjects/<%= build.project %>/src/scss/styles.scss"
}
Grunt compiles the configs required for a task at the time they're run & will process the lodash templates then, allowing you to inject your project name into a task. Since we stored the value in the config object, the value will persist through until grunt completes and exits.
I'm trying to build a Grunt task that minifys my JS files and return a single minified JS file.
This is my gruntfile.js file:
module.exports = function (grunt) {
// Project configuration.
grunt.initConfig({
minified: {
files: {
src: [
'js/*.js',
],
dest: 'js/min/'
},
options: {
allinone: true
}
},
});
grunt.loadNpmTasks('grunt-minified');
};
When I run the task it does work, but it also returns an error.
> cmd.exe /c grunt -b "C:\Users\alucardu\documents\visual studio 2015\Projects\JS-demo\JS-demo" --gruntfile "C:\Users\alucardu\documents\visual studio 2015\Projects\JS-demo\JS-demo\Gruntfile.js" minified
Running "minified:files" (minified) task
Warning: Cannot read property 'yellow' of undefined Use --force to continue.
Process terminated with code 3.
Aborted due to warnings.
I've done a search action in my entire solution for 'yellow' but it doesn't return any results. Also when I empty both my JS files that are being minified it still returns the error.
Does anyone know why it's returning this error?
By removing the
options: {
allinone: true
}
The warning no longer showed up, but it also doesn't concat the files together. So I've added another task called concat. So now my gruntfile looks like this:
module.exports = function (grunt) {
// Project configuration.
grunt.initConfig({
watch: {
scripts: {
files: ['js/*.js'],
tasks: ['concat', 'minified', 'uglify'],
},
},
concat: {
dist: {
src: ['js/*.js'],
dest: 'js/min/concat.js'
},
},
minified: {
files: {
src: ['js/min/concat.js'],
dest: 'js/min/minified.js'
},
},
uglify: {
my_target: {
files: {
'js/min/uglify.js': ['js/min/minified.jsconcat.js']
}
}
},
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-minified');
grunt.loadNpmTasks('grunt-contrib-uglify');
};
And it seems to be working fine.
Hi everyone,
I have a lot of css files in my project with a very complex structure so I had to replicate the structure of the folders containing css files at the root of the project.
So every time I save a scss file, grunt has to check each 160+ lines of config I gave him.
Is there a way to optimize this this configuration? Maybe an option to tell contrib-sass to compile the scss file with the same structure he's in?
Here is a simplified example of my code :
...
sass: {
dist: {
options: {
style: 'expanded',
sourcemap: 'none',
trace: true,
},
files: {
'./css/laptop.css': './scss/css/laptop.scss',
....
... (160 more lines)
....
'./css/player.css': './scss/css/player.scss'
}
}
},
...
Thanks!
You can pass parameters to your Grunt task using grunt.option. Take a look.
You can pass params to grunt using this syntax:
$grunt [task] myparam=myvalue
Then, from any place in your gruntfile (or sub-files) you can do that:
var myoption = grunt.option("myparam") || defaultvalue;
With that, you can create a task for compile only one scss file passing the name in the param for example or even if the param doesn't exist compile all.
...
var myoption = grunt.option("myparam") || defaultvalue;
sass: {
dist: {
options: {
style: 'expanded',
sourcemap: 'none',
trace: true,
},
files: {
if ( myoption == defaultvalue ) {
'./css/laptop.css': './scss/css/laptop.scss',
....
... (160 more lines)
....
'./css/player.css': './scss/css/player.scss'
} else {
}
}
}
},
...
After some research I discovered grunt-newer which can be used this way:
css:{
files: [
'./scss/**'
],
tasks: ['newer:sass'],
livereload: {
options: { livereload: true },
files: ['./**'],
},
}
It's not what I was trying to do exactly but It optimised perfectly the grunt process.
Really nice plugin!!
Please help me.. I am new to grunt. I have to run grunt task one by one. When i execute the Grunt file i am trying to execute one by one ['clean', 'writefile','concat','requirejs'] since write file helps to create a dynamic json for requier.
When ever i execute first time grunt gives me error and at the second time it runs without error since the json file is created in the path. I tried grunt.task.run() but i couldn't get it
module.exports = function (grunt) {
'use strict';
grunt.initConfig({
// Before generating any new files, remove any previously-created files.
clean: {
tests: ['rjs/build.json','frontend-built']
},
writefile: {
json_value: {
options: {
data: 'frontend/config.json'
},
src: 'rjs/value.hbs',
dest: 'rjs/build.json'
}
},
requirejs: {
compile: {
options:grunt.file.readJSON('rjs/build.json')
}
},
concat: {
dist: {
files: {
'frontend/theme/css/theameA.css': ['frontend/theme/css/common/**/*.css','frontend/theme/css/lib/**/*.css','frontend/theme/css/theme_a/**/*.css'],
'frontend/theme/css/theameB.css': ['frontend/theme/css/common/**/*.css','frontend/theme/css/lib/**/*.css','frontend/theme/css/theme_b/**/*.css']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-writefile');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-requirejs');
grunt.registerTask('default', ['clean', 'writefile','concat','requirejs']);
};
Ok the problem is that the config code is processed before the tasks run so even if it didn't error out, it wouldn't be the correct behavior.
Try this to set the requirejs config dynamically via another custom task:
module.exports = function (grunt) {
'use strict';
grunt.initConfig({
// Before generating any new files, remove any previously-created files.
clean: {
tests: ['rjs/build.json','frontend-built']
},
writefile: {
json_value: {
options: {
data: 'frontend/config.json'
},
src: 'rjs/value.hbs',
dest: 'rjs/build.json'
}
},
concat: {
dist: {
files: {
'frontend/theme/css/theameA.css': ['frontend/theme/css/common/**/*.css','frontend/theme/css/lib/**/*.css','frontend/theme/css/theme_a/**/*.css'],
'frontend/theme/css/theameB.css': ['frontend/theme/css/common/**/*.css','frontend/theme/css/lib/**/*.css','frontend/theme/css/theme_b/**/*.css']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-writefile');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-requirejs');
grunt.registerTask('setRjsConfig', function() {
grunt.config('requirejs.options.compile', grunt.file.readJSON('rjs/build.json'));
});
grunt.registerTask('default', ['clean', 'writefile','concat', 'setRjsConfig', 'requirejs']);
};