I'm trying to create a separate task called stylelint because for reasons I do not want it to be part of the postcss task.
In the gruntfile I'm writing:
stylelint: {
options: {},
src: './assets/css/precss/**'
}
When I run grunt stylelint it lints my code but when it finds an issue then I get Warning: Task "stylelint:src" failed. Use --force to continue.
Am I omitting something?
You should use grunt-stylelint rather than PostCSS as it supports the native stylelint format reporters. Your Gruntfile config should then look something like this:
stylelint: {
css: {
options: {
configFile: '.stylelintrc',
format: 'css'
},
src: [ 'assets/*.css' ]
},
},
I just realised that this is not possible. You have to run grunt with --force
Related
Error: Unable to resolve module navigation/stack-routes from /Users/jacksaunders/gymzoo/src/navigation/tabs/MainTabs.tsx: navigation/stack-routes could not be found within the project or in these directories:
node_modules
Hello there! I have just tried to set up absolute imports (using navigation/stack instead of ../../../navigation/stack)
I am not sure what is happening because it looks to be okay in my IDE but my metro is flagging the following error.
Here is my tsconfig for context:
I have tried deleting my node modules, npm i and pod install but theres no luck.
Please throw your suggestions at me! Or advise me on how to solve this.
All the best,
Jack :)
You need to update your babel.config.js to understand the root imports you're using here, because your .tsconfig only takes care about the code before it's transcompiled.
You can use the babel-plugin-root-import to achieve this.
npm package: https://www.npmjs.com/package/babel-plugin-root-import
Example babel.config.js could look like this:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'babel-plugin-root-import',
{
paths: [
{
rootPathSuffix: './src',
rootPathPrefix: 'src',
},
{
rootPathSuffix: './src/navigation',
rootPathPrefix: 'navigation',
},
]
},
],
],
};
It's not an only option though, you can also use babel-plugin-module-resolver, which is more popular (https://www.npmjs.com/package/babel-plugin-module-resolver).
What is the best way to configure browserify plugin in grunt for a project where reactjs is used along with the plain javascript?
I.e. assuming that I want to use require(...) in every js file in my project and directory structure looks as follows:
/js/model/foo.js (plain javascript)
/js/model/... (plain javascript)
/js/services/foo-service.js (plain javascript)
/js/view/foo-item-view.jsx (reactjs)
/js/view/... (reactjs)
/js/main.js (plain javascript, entry point)
etc.
I want to apply reactjs transform for all the files within /js/view/... dir and then transform everything with browserify. I found no clean way to do that.
Is it possible at all?
UPDATE:
All right, I think my question was a little bit unclear. I understand that this is definitely doable and here is how I'm doing it right now (it looks like a hack to me):
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
scripts: {
files: ['web/js/**/*.js', 'web/html/index.html'],
tasks: ['copy', 'react', 'browserify']
}
},
copy: {
main: {
files: [
{
src: 'web/html/index.html',
dest: 'target/web/index.html'
},
{
cwd: 'web/js', // source js dir
src: ['**', '!**/*.jsx'], // copy all files and subfolders to the temporary dor, except for jsx
dest: 'target/web/tmp/js', // destination folder, used by browserify
expand: true // required when using cwd
}
]
}
},
react: {
dynamic_mappings: {
files: [
{
expand: true,
cwd: 'web/js/view',
src: ['**/*.jsx'],
dest: 'target/web/tmp/js/view',
ext: '.js'
}
]
}
},
browserify: {
dist: {
files: {
'target/web/js/app.js': ['target/web/tmp/js/main.js'],
}
}
}
});
This doesn't look elegant to me, because of extra copy instead of 'reactifying' sources in browserify task. May be I'm missing something and this solution can be simplified?
You can just run the jsx transform over everything. It won't do anything at all to regular JavaScript code.
Anything beyond that is an optimization, but just use watchify (or the watchify grunt plugin) and you won't notice.
In response to the comment and edit... do you really need grunt here?
npm i -D browserify watchify reactify
And then in your package.json:
"scripts": {
"build": "browserify src/main.js -o dist/bundle.js",
"watch": "watchify src/main.js -o dist/bundle.js"
},
"browserify": {
"transform": ["reactify"]
}
You can also just have everything be .js, it's much simpler imo. If you need to some other things like css preprocessors, image compression, sprite sheets, running tests, etc. you should use a tool like grunt/gulp for that.
For browserify, I find it's much easier to just use watchify on its own.
I've split out my grunt plugins into their own files and I'm using the load-grunt-config (https://github.com/firstandthird/load-grunt-config) to call them:
module.exports = function (grunt) {
'use strict';
require('load-grunt-config')(grunt);
};
I've got sass, autoprefixer, cssmin and watch tasks working but I'm also using Browsersync and px-to-rem these two plugins return:
Warning: Task "remify" not found. Use --force to continue.
and
Warning: Task "browsersync" not found. Use --force to continue.
when called individually or as part of a bigger task.
I've followed the syntax for the separate.js files for these two plugin so I'm at a loss. For example the remify.js file which is called when running grunt is written like this
module.exports = {
dist: {
options: {
base: 16,
fallback: true,
fallback_existing_rem: true,
ignore: []
},
files: {
'css/style.css': 'css/style.css'
}
}
};
Any ideas where this is going wrong?
I've also set up a gist of the example code, include package.json and a aliases.yml
https://gist.github.com/sturobson/f88258fd010e901e24d9
You have to call the grunt plugin exactly what it is. So where I've got remify I should be using px_to_rem and where I've got browsersync and I should have browserSync.
Silly me.
you can pass a second argument to load-grunt-config to provide some options where you could also define some pattern which can be used by load-grunt-tasks which is used internally.
if you don't pass a second argument, it uses the default-pattern of load-grunt-tasks which is grunt-*.
so if you want to load all devDependencies without defining them seperatly, do it like this:
require('load-grunt-config')(grunt, {
loadGruntTasks: {
pattern: '*',
scope: 'devDependencies'
}
});
I have followed the instructions here: https://www.npmjs.org/package/grunt-browserify, to try and set up source maps for browserify on grunt. The options for browserify in my gruntfile are :
browserify: {
options: {
bundleOptions : {
debug: true
}
},
dist: {
files: {
"public/client.bundle.js": ["bundle.js"]
}
}
}
The generation of bundle.js happens without any issues, however the source map generation does not happen. Is there anything wrong with my grunt-browserify options.
Thanks for looking.
use browserifyOptions instead of bundleOptions
browserify: {
options: {
browserifyOptions: {
debug: true
}
},
...
}
By default, browserify generates inline source maps as a comment in bundle.js. Browserify's README suggests using exorcist if you want to extract them to a separate file:
$ browserify main.js --debug | exorcist bundle.js.map > bundle.js
And grunt-extract-sourcemap rolls this up in a grunt task
I am trying to add bourbon as a dependency to a project where grunt-contrib-sass is used. node-bourbon has the following to say about grunt and Sass integration:
grunt.initConfig({
sass: {
dist: {
options: {
// THIS IS THE LINE I ADDED TO MY CONFIG
includePaths: require('bourbon').includePaths,
outputStyle: 'compressed'
},
files: {
'path/to/output.css': 'path/to/input.scss'
}
}
}
});
However, when running grunt I get the following error:
OptionParser::InvalidOption: invalid option: --include-paths
This error appears with any array of paths given to includePaths, not just bourbon.
What am I doing wrong?
node-bourbon is using grunt-sass rather than grunt-contrib-sass. That's why the option isn't available and you get this error.
So either swap those two grunt tasks or replace includePaths with loadPath. That's the equivalent option in grunt-contrib-sass.