I am trying to use Jeet and Rupture with my Stylus-Brunch.
What do I need to configure to get it to work?
It's incredibly simple, or at least was for me. I just added this to my config.coffee file:
plugins:
stylus:
plugins: ['rupture', 'jeet']
... and then ran npm install -g rupture jeet inside the brunch app folder (may need sudo)
You would probably need to configure a new plugin — a fork of stylus-brunch with Jeet/Rupture.
Related
I'm new to React. I have a problem I can not solve. I have an ".eslintcache" file, which was created for me automatically as soon as I created a new app in React using "create-react-app". I do not know why I have this file. I tried to delete it but it always comes back.
I ran this command - "npm uninstall -g eslint --save" - to delete eslint's directory but it does not help.
I do not know how to handle it, I did not find a solution to it, I would be happy to help.
It is part of the CRA bundle. I'd recommend just adding it to the .gitignore file if it isn't in there already.
From the ESLint docs:
Store the info about processed files in order to only operate on the changed ones. The cache is stored in .eslintcache by default. Enabling this option can dramatically improve ESLint's running time by ensuring that only changed files are linted.
It seems as new issue in React App (this issue opened on Nov 27, 2020)
Put .eslintcache in .gitignore also do:
git rm -rf --cached .eslintcache
git add .
git rm: remove files from working tree ...
-r: recursive removal in case of a directory name ...
-f or -force: Override the up-to-date check.
Details: https://git-scm.com/docs/git-rm
This file is part of the new version of create-react-app package, you can't avoid it to be added, just like other files being added. This is the bundle.
This is part of the new version in react. I also had files "reportWebVitals" and "setupTests", I deleted them and everything works properly.
With "reportWebVitals" you can track real user performance on your site.
And with "setupTests" you are Initializing Test Environment
this feature is available with react-scripts#4.0.0 and higher
I do not need these properties, just deleted them and that's it, the eslintcache can not be deleted is part of the bundle.
I faced the problem, tried putting .eslintcache in .gitignore and implement the command git add . but was not enough, because you should do git add . after every change in your code, and that's not sence at all of course, this is not a clean workround anyway.
So, simply i downgraded the react-scripts to #4.0.0, and that problem disapeared completely
I think the react-scripts#4+ isn't stable yet
I ended up writing a custom plugin to delete the .eslintcache before each watch compile:
var exec = require("child_process").execSync;
module.exports = class ESLintClearPlugin {
constructor(options) {
this.options = options;
}
apply(compiler) {
compiler.hooks.watchRun.tap("ESLintClearPlugin", () => {
exec("del .eslintcache");
});
}
};
Then you use it in your webpack config:
const ESLintClearPlugin = require("./pathtofile");
// webpack config
plugins: [new ESLintClearPlugin()]
Basically I am getting this list of errors after installing react-awesome-query-builder package on a brand new installed Gatsby environment.
The examples to this solution, point to add some configuration to the webpack.config.js, but on Gatsby not sure where I can add the fixes. If someone can point me to the right direction.
While there is a way to add custom webpack config settings in Gatsby, this issue might be solvable by adding Gatsby packages for less and ant design (gatsby-plugin-antd, and gatsby-plugin-less).
npm install --save antd gatsby-plugin-antd less gatsby-plugin-less
You will also need to add them into your gatsby-config.js file:
plugins: [
{
resolve: "gatsby-plugin-antd",
options: {
style: true,
},
},
{
resolve: "gatsby-plugin-less",
options: {
javascriptEnabled: true,
},
}
]
Each of them have additional configurations you can add in. For gatsby-plugin-antd, you'll want style set to true since it is using less.
For the gatsby-plugin-less package, the options will pass through to less-loader configuration. It seemed like JS being enabled was needed for react-awesome-query-builder to run, which is deprecated. I'm not sure if there is a way to avoid having that on.
I think that should get you past that specific webpack error, I'm not sure if it will make the react-awesome-query-builder demo/example work though.
If you do end up needing to edit the webpack config, you can follow the guide on gatsby's docs.
I wanted to do an Angular graph for my current project in StackMEAN, and I found this solutions:
https://www.npmjs.com/package/grunt-angular-modules-graph
https://www.npmjs.com/package/grunt-angular-architecture-graph
But, I don't understand how it works, and how I can configured it correctly.
Which is the Gruntfile.js? It's the Gruntfile.js that is inside my node_modules/grunt-angular-architecture-graph? Or another?
I'm not sure about how to modificated that file:
grunt.initConfig({
'modules-graph': {
options: {
// Task-specific options go here.
},
your_target: {
files: {
'destination-file.dot': ['src/*.js']
}
},
},
});
What is exactly destination-file.dot? Where is it located? And what is ['src/*.js']? Is it my code source? What happens if I got my source into folders?
In the other hand, I don't know how to run Grunt task, or if they are
automatically done when I do "npm install".
Also, is there solution more easy to do a Angular graph?
First of all I don't know if you're really using MEAN.JS, or another mean stack project. If you're using the latest MEAN.JS I believe it now uses only Gulp instead of Grunt. Eitherway if you see a file named gruntfile.js in your project root directory, then you're good to go.
Since grunt-angular-modules-graph advises to use grunt-angular-architecture-graph instead, I'll give some instructions regarding it.
As stated in grunt-angular-architecture-graph docs, you just have to enable its task in your project's gruntfile.js file with this line:
grunt.loadNpmTasks('grunt-angular-architecture-graph');
Then add the following code block, where you must set the path for all your js files (related with Angular):
angular_architecture_graph: {
diagram: {
files: {
// "PATH/TO/OUTPUT/FILES": ["PATH/TO/YOUR/FILES/*.js"]
"architecture": [
"<%= projectConfig.app %>/<%= projectConfig.project %>/**/*.js"
]
}
}
}
Then you have to register the task:
grunt.registerTask('diagram', ['angular_architecture_graph']);
After this configuration you can use Grunt to run the task by going to your project root directory (where your gruntfile.js is located) and do the following command in the console:
grunt diagram
If everything is set correctly the task should be executed.
For more information regarding Grunt and how to create and register task, I suggest reading the official Grunt documentation.
I've cloned the create-react-app and I would like to use the webpack plugin markdown-loader. Can someone please advise me how I would modify the webpack.config.dev.js to do so.
Thanks
If you don't want to eject out of create-react-app, it's actually fairly simple to do with loader directives.
Install markdown-loader to turn the markdown into HTML
Install html-loader to be able to load HTML into JS
Then:
import YourMarkdown from '!html-loader!markdown-loader!./YOURFILE.md'
export default function MarkdownComponent() {
return <div dangerouslySetInnerHTML={{ __html: YourMarkdown }} />
}
Taken from Dan Abramovs' post here: https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html
All the build settings are preconfigured and can’t be changed.
If you wish to modify any of the settings you can Eject from the app.
“Ejecting” lets you leave the comfort of Create React App setup at any time. You run a single command, and all the build dependencies, configs, and scripts are moved right into your project. At this point you can customize everything you want, but effectively you are forking our configuration and going your own way.
npm run eject will cause all the config options to be moved over to your application giving you full control over the config. - This is a one way process.
I've just tried to run Angular-bootstrap generator and answer all the options as so:
[?] What version of angular would you like to use? 1.2.15
[?] Which official angular modules would you need? animate, route
[?] Any third-party component you may require? bootstrap#~3.1.0
[?] Would you want me to support old versions of Internet Explorer (eg. before IE9)? nose arrow keys)
[?] Should I set up one of those JS preprocessors for you? none
[?] Should I set up one of those CSS preprocessors for you? sass
[?] What's the base name of your project? bootstrap
[?] Under which lincense your project shall be released? MIT
[?] Would you mind telling me your username on GitHub? mgcrea
Everything runs fine and dandy, but when I try and run grunt serve or grunt build I get the following error: Warning: Task "bower-install" not found. Use --force to continue.
I've tried to run bower install & npm install to fix this error but I get the following: npm WARN package.json bootstrap#0.1.0 No README data
Has anyone any advice on how I can resolve this?
Please try the following:
try with "bowerInstall" - not "bower-install" as this option has been renamed in later versions
(see https://github.com/mgcrea/generator-angular-bootstrap/issues/2)
Make sure you run bowerInstall from the root directory of your app
have a look at your Gruntfile.js - is there a function "bowerInstall" ? If not, just add it:
bowerInstall: {
target: {
// Point to the files that should be updated when
// you run `grunt bower-install`
src: [
'app/views/**/*.html', // .html support...
'app/*.html', // .html support...
],
// Optional:
// ---------
cwd: '',
dependencies: true,
devDependencies: false,
exclude: [],
fileTypes: {},
ignorePath: '',
overrides: {}
}
}
You can add this function for example right after the function filerev: {....}
Make sure you have installed the package "grunt-bower-install". Have a look into your package.json. You should find the following line there:
"grunt-bower-install": "^1.6.0",
If not, just add it and then run:
npm install
grunt