I want to set up a Grunt task to run JSDoc. I am using grunt-jsdoc which the JSDoc npm page recommends. It works ok, but I cannot use my jsdoc.json file I have created.
{
"tags": {
"allowUnknownTags": true,
"dictionaries": ["jsdoc","closure"]
},
"source": {
"include": [
"lib/",
"routes/",
"README.md"
]
},
"plugins": ["plugins/markdown"],
"templates": {
"cleverLinks": false,
"monospaceLinks": false
},
"opts": {
"destination": "public/docs"
}
}
I have found that when I pull bits out of the JSDoc and put them in Grunt, I have no issues:
//This will generate a blank public/docs folder
jsdoc: {
dist : {
src: './jsdoc.json'
options: {
destination: 'public/docs'
}
}
}
I want to be able to just reference the JSON file, and have it work. Currently, doing this will not generate errors, but it doesn't do anything other then creating an empty doc folder in the base directory.
jsdoc: {
dist : {
src: './jsdoc.json'
}
}
I have also verified that the jsdoc.json file is correct jsdoc -c jsdoc.json
You need to put the conf file into the options property.
jsdoc: {
dist: {
options: {
configure: './jsdoc.json'
}
}
}
Related
I have my express.js project in monorepo. I want to add custom path alias to it.
The directory structure is:
./
server/
----> jsconfig.json
----> .eslintrc.js
----> src/
--------> index.js
--------> modules/auth
-------------> auth.controller.js
jsconfig.json
{
"compilerOptions": {
"module": "ES6",
"baseUrl": "./",
"paths": {
"#modules/*": [
"src/modules/*"
]
}
},
"exclude": ["node_modules"]
}
.eslintrc.js
module.exports = {
env: {
es2021: true,
node: true,
},
extends: [
'airbnb-base',
],
parserOptions: {
ecmaVersion: 12,
sourceType: 'module',
},
rules: {
'no-console': 'error',
'no-debugger': 'error',
},
settings: {
'import/resolver': {
alias: {
map: [
['#modules/*', 'src/modules/*'],
],
extensions: ['.js', '.json'],
},
},
},
};
Simply, I just tried to import auth controller in my index.js file.
import authRoutes from '#modules/auth/auth.routes';
but I get the following error: Unable to resolve path to module '#modules/auth/auth.controller' .eslint import/no-unresolved
please, don't suggest to turn off the rule.
I've alreadyy tried eslint-import-resolver-jsconfig, but I got Cannot resolve jsConfig, SyntaxError } on 150.
Because I used monorepo, there was a problem for ESLint or even lint-staged.
So now I have only one project per repository and:
Added custom paths in jsconfig.json:
"paths": {
"#modules/*": [
"./src/modules/*"
]
}
Installed eslint-import-resolver-jsconfig and added the following configuration to the eslint.json:
"extends": [
"airbnb-base",
"eslint:recommended"
],
"plugins": ["import"],
"settings": {
"import/resolver": {
"jsconfig": {
"config": "jsconfig.json"
}
}
}
Installed the Babel plugin babel-plugin-module-resolver and added the following settings to the .babelrc:
"plugins": [
[
"module-resolver",
{
"alias": {
"#modules": "./src/modules"
}
}
]
]
But, again: This only works if you have one project per repository and all your configuration files (.*rc, package.json, etc) are in the root level.
To achieve the above I use the module-alias package.
After installing it as a normal dependency, npm i --save module-alias, add the following to your package.json:
"_moduleAliases": {
"#modules": "./src/modules"
}
That will basically define the mappings for all the aliases you want to define.
To make it work, you will now need to import the following on top of your application under index.js:
require("module-alias/register"); // If using commonJS
// or
import "module-alias/register"; // If transpiling es6
You are now all set and should be able to import your files with absolute paths looking as:
const authRoutes = require("#modules/auth/auth.routes")
// or
import authRoutes from "#modules/auth/auth.routes";
In case eslint still flags the unresolved path, you may need to update your jsconfig.json or tsconfig.json to contain the below:
"paths": {
"#modules/*": ["src/modules/*"]
}
You can find the package documentation and read more about its usage here.
I'm working on a Node.js website and I'm using Grunt to concat and minify my CSS and JS files. However, after running the grunt command I'm getting the error message:
fullPage: Fullpage.js can only be initialized once and you are doing it multiple times!
Here's my grunt file:
/*global module */
module.exports = function (grunt) {
"use strict";
grunt.initConfig({
// read in the project settings from the package.json file into the pkg property
pkg: grunt.file.readJSON("package.json"),
// Install only the bower packages that we need
bower: {
install: {
options: {
"targetDir": "./public/lib",
"copy": true,
"cleanup": true,
"install": true
}
}
},
concat: {
css: {
src: ["public/lib/css/**/*.css", "public/css/cts.css"],
dest: "public/lib/dist/main.css"
},
js: {
src: ["public/lib/**/jquery.js", "public/lib/**/*.js", "public/js/cts.js"],
dest: "public/lib/dist/main.js"
}
},
cssmin: {
target: {
files: {
"public/lib/dist/main.min.css": "public/lib/dist/main.css"
}
}
},
uglify : {
js: {
files: {
"public/lib/dist/main.min.js": "public/lib/dist/main.js"
}
}
},
copy: {
files: {
expand: true,
flatten: true,
src: ["public/lib/fonts/**/*"],
dest: "public/lib/fonts/",
filter: "isFile"
}
}
});
// Add all plugins that your project needs here
grunt.loadNpmTasks("grunt-bower-task");
grunt.loadNpmTasks("grunt-contrib-concat");
grunt.loadNpmTasks("grunt-contrib-copy");
grunt.loadNpmTasks("grunt-contrib-cssmin");
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks("grunt-contrib-watch");
// this would be run by typing "grunt test" on the command line
// the array should contains the names of the tasks to run
grunt.registerTask("test", []);
// define the default task that can be run just by typing "grunt" on the command line
// the array should contains the names of the tasks to run
grunt.registerTask("default", [ "bower", "concat", "cssmin", "uglify", "copy"]);
grunt.registerInitTask("install", ["bower"]);
};
If anything I would have thought jQuery would be the one that's getting concatenated multiple times but it's not. Any suggestions what I might be doing wrong?
EDIT: Here's my upgraded grunt file with all 3rd party libraries listed in the concat.src.
/// <binding BeforeBuild='default' />
/*global module */
module.exports = function (grunt) {
"use strict";
grunt.initConfig({
// read in the project settings from the package.json file into the pkg property
pkg: grunt.file.readJSON("package.json"),
// Install only the bower packages that we need
bower: {
install: {
options: {
"targetDir": "./public/lib",
"copy": true,
"cleanup": true,
"install": true
}
}
},
concat: {
css: {
src: ["public/lib/css/**/*.css", "public/css/cts.css"],
dest: "public/lib/dist/main.css"
},
js: {
src: [
"public/lib/js/jquery/jquery.js",
"public/lib/js/bootstrap/bootstrap.js",
"public/lib/js/fullpage.js/jquery.fullpage.js",
"public/lib/js/jquery-easing-original/jquery.easing.js",
"public/lib/js/slimscroll/jquery.slimscroll.js",
"public/lib/js/wow/wow.js",
"public/js/cts.js"
],
dest: "public/lib/dist/main.js"
}
},
cssmin: {
target: {
files: {
"public/lib/dist/main.min.css": "public/lib/dist/main.css"
}
}
},
uglify : {
js: {
files: {
"public/lib/dist/main.min.js": "public/lib/dist/main.js"
}
}
},
copy: {
files: {
expand: true,
flatten: true,
src: ["public/lib/fonts/**/*"],
dest: "public/lib/fonts/",
filter: "isFile"
}
}
});
// Add all plugins that your project needs here
grunt.loadNpmTasks("grunt-bower-task");
grunt.loadNpmTasks("grunt-contrib-concat");
grunt.loadNpmTasks("grunt-contrib-copy");
grunt.loadNpmTasks("grunt-contrib-cssmin");
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks("grunt-contrib-watch");
// this would be run by typing "grunt test" on the command line
// the array should contains the names of the tasks to run
grunt.registerTask("test", []);
// define the default task that can be run just by typing "grunt" on the command line
// the array should contains the names of the tasks to run
grunt.registerTask("default", [ "bower", "concat", "cssmin", "uglify", "copy"]);
grunt.registerTask("combine", [ "concat", "cssmin", "uglify", "copy"]);
grunt.registerInitTask("install", ["bower"]);
};
Your issue seems to be in concate.js.src
src: ["public/lib/**/jquery.js", "public/lib/**/*.js", "public/js/cts.js"]
This will have your files added multiple times as there might some files common among the paths mentioned in src.
You should probably move all your vendor files like jquery out of the public directory and put in a different one, say vendor.
Your src should then look something like
src: ["vendor/**/*.js", "public/**/*.js"]
As you see now there are no common files among these two paths.
Also its a good practice to always have 3rd party code outside your app directory as a sibling folder and not inside it.
EDIT:
Ah! I see whats your problem. You want to have jquery first among the other vendor files.
public/lib/**/jquery.js and public/lib/**/*.js together might be causing files added twice.
Try this
src: ["public/lib/jquery/jquery.js", "public/lib/**/*.js", "!public/lib/jquery/jquery.js", public/js/cts.js"]
Put the full path of jquery first public/lib/jquery/jquery.js and then the !public/lib/jquery/jquery.js should prevent jquery being added again as part of public/lib/**/*.js
Got the above pattern from here http://gruntjs.com/configuring-tasks#globbing-patterns
If this still doesn't work, then another option is to add all paths in the src array individually. If you have a requirejs config just copy the paths from there, as jquery might not be the only dependency issue you face in future.
I am trying, using grunt and babel, to transpile all js6 files in a folder and end up with a concatenated single file (js5) with a working sourcemap to the original es6 files. However the sourcemapping does not work. My babel, concat settings below:
"babel": {
options: {
sourceMap : true
},
dist: {
files:[
{
expand: true,
cwd: 'wwwroot/js/src',
src: ['*.js'],
dest: 'tmp/js'
}]
}
},
concat: {
options: {
sourceMap: true
},
js: {
src: [
'tmp/js/*.js',
],
dest: 'wwwroot/js/app.js'
}
}
Versions:
"grunt": "0.4.5",
"grunt-bower-task": "0.4.0",
"grunt-babel": "5.0.1",
"grunt-contrib-concat" : "0.5.1"
I am ending up with firstly a folder with a lot of js files and src maps(tmp directory). But concatinating them into one file messes up with source mapping completely.
Ideas? Also, can I somehow skip the making of temporary files and sort of just pipe the result into concat?
Reversing the order of task will make this much easier.First run the concat task on the JS files. After that run babel task on the single file created by concat task previously with the following options
options: {
sourceMap: true,
inputSourceMap: grunt.file.readJSON('script.js.map')
},
Here the script.js.map file is the name of the source map file generated by concat task. As inputSourceMap option excepts a source map object , we pass it in using the grunt.file API's readJSON method
The full Grunt file configuration would be:
concat: {
options: {
sourceMap: true
},
js: {
src: ['Modules/**/js/*.js'],
dest: 'script.js'
}
},
babel: {
dist: {
options: {
sourceMap: true,
inputSourceMap: grunt.file.readJSON('script.js.map')
},
src: [
'script.js',
],
dest: 'app.js'
}
}
Example project: https://github.com/pra85/Grunt-Concat-Babel-Example
I am trying to concatenate a set of .less files into a big .less file, and then have it processed into a big .css file using Grunt's grunt-contrib-less module.
module.exports = function(grunt) {
require('load-grunt-tasks')(grunt);
grunt.initConfig({
concurrent: {
target1: ['concat:lesscss'],
target2: ['less']
},
concat: {
lesscss: {
files: {
'server/static/css/big.less':
['server/static/css/commons-reset-and-core.css',
'server/static/css/base.less',
'server/static/css/ads.less',
'server/static/css/ext.less']
}
}
},
less: {
files: {
'server/static/css/big.css':
'server/static/css/big.less'
}
}
});
grunt.registerTask('default', ['concurrent:target1', 'concurrent:target2']);
};
The big.less is created properly, but the big.css file is not. Yet, Grunt returns
Done, without errors.
What am I doing wrong?
Did you try to wrap it as here:
less: {
development: {
files: {
'server/static/css/big.css': 'server/static/css/big.less'
}
}
},
I think that's required
my problem is as following; I'm using grunt-include-source (https://www.npmjs.com/package/grunt-include-source) to include my scripts and css to my index.html, this is working fine but I can only specify one basepath, and i would like to setup this plugin for both dev and production. (im using the same folder structure so nothing will change in my index.html, the only difference is that in concatenate in my production)
includeSource: {
options: {
basePath: 'dev'
},
myTarget: {
files: {
'dev/index.html': 'app/index.html'
}
}
},
Code above is working fine, now i want to have 2 different configuration, but something like this doesn't work when running the task includeSource:dev:
includeSource: {
dev: {
options: {
basePath: 'dev'
},
myTarget: {
files: {
'dev/index.html': 'app/index.html'
}
}
},
prod: {
options: {
basePath: 'prod'
},
myTarget: {
files: {
'prod/index.html': 'app/index.html'
}
}
}
},
index.html:
<!-- include: "type": "js", "files": "scripts/*.js" -->
Anyone could help me out how I would able to achieve this?
edit: Just to be a bit more clear, im running this script after my builds for either production or development is done, for both my prod/dev all scripts are stored in scripts/
Kind regards,
G
Just configure your task like this instead:
includeSource: {
options: {
basePath: 'dev/'
},
dev: {
files: {
'dev/index.html': 'app/index.html'
}
},
prod: {
options: {
basePath: 'dist/'
},
files: {
'dist/index.html': 'app/index.html'
}
}
},