Within the root directory of my project, I run the following command using npm and html-minifier-terser:
npx html-minifier-terser --input-dir src/ --output-dir dist/ src/index.html -o index.min.html --file-ext html
The output file to dist/ is index.html and not index.min.html.
I tried to install html-minifier-terser globally, which does not help. I then tried to remove the specification of input and output directories within the command, which resulted in the expected behavior.
Any suggestions why I can't get dist/index.min.html to work?
Doing a little more research, I found a solution on this thread ng build production should minify index.html in dist.
The workaround is to omit using the input and output directory arguments and instead specify the output path as in --output dist/index.min.html.
Related
I am trying to run the command "tsc --build" when running "docker compose up --build" so it can run that command when creating the Docker container.
The thing is I am getting always an error:
I have been reading about it and I am not importing in my code anything outside the "rootdir"... so I have no idea why those packages are there...
I am not sure if removing the rootdir option from tsconfig file is a good idea or it would cause an error afterwards in my app...
Any ideas?
You need to copy your tsconfig.json to your Docker image.
Add the following after line 5:
COPY tsconfig.json ./
Notes:
You probably need to also copy the nodemon.json
At the line 10 you copy all the current directory to your image, ensure your .dockerignore file contain a rule to exclude the node_modules/, dist/ folders.
let's say, I have following project structure:
back/package.json
back/lib/Content/*.js
front/package.json
slices/budget/back/package.json
slices/budget/back/lib/Content/*.js
slices/budget/front/package.json
slices/accounting/back/package.json
slices/accounting/back/lib/Content/*.js
slices/accounting/front/package.json
how do I?
cd back && eslint ./lib/**/*.js ../slices/**/lib/Content/*.js
specifically, I want to
install eslint one time as devDependencies
somewhere in /back of root module
config eslint one time somewhere in /back/package.json:eslint key of root module
add eslint config in /back/package.json of root module just one time
eslint entire tree of modules
not in each slice seperatly
run from ci cd
so I need a way to run from /back
and later - maybe someway to respect eslint config hierarchy
not change project directory structure at all
what I receive
cd back && npm run lint
> back#1.0.0 lint
> eslint ../
Oops! Something went wrong! :(
ESLint: 8.23.1
ESLint couldn't find a configuration file
reason: https://eslint.org/docs/latest/user-guide/configuring/configuration-files#using-configuration-files
You can use the --ignore-path option to specify a file with patterns that should be ignored. The file should contain one pattern per line. For example, to ignore all files in the node_modules directory, you could create a .eslintignore file with the following contents:
node_modules
You can also use the --ignore-pattern option to specify a pattern that should be ignored. For example, to ignore all files in the node_modules directory, you could run:
eslint . --ignore-pattern node_modules
The error is probably because you haven't specified the eslint config file explicitly. To run eslint on all the modules, starting from the parent folder, run: eslint ../ -c .eslintrc.js (or whatever .eslintrc file you use in back). It seems like eslint is confused if it does not have the config file in the same directory it is running from hence you need to manually specify the path to it.
The correct way of solving this issue would be creating sharable config file with configuration you have in back right now:
module.exports = {
rules: {
semi: [2, "always"]
}
};
Then you publish it to public or private npm with a name #your-project/eslint-config and use it in .eslintrc.json that is the same in all your projects:
{
"extends": [
"#your-project/eslint-config"
]
}
This way gives you ability to configure CI in a simple and independent way if you have lots of repositories: just run eslint lib/*.js.
If you have all the repositories in one computer and want to lint all of them using one command, you can use one of my tools:
redfork, install eslint and redfork globally and run:
redfork 'eslint lib/*.js'
But maybe you need to have some changes in project structure.
runny, if you don't want to make changes in project structure, just add configuration file .runny.json:
{
"command": "eslint lib/*.js",
"directories": [
"~/one",
"~/two",
"~/three"
]
}
It will run the same command for any directory you need.
I had a similar issue and the following has solved my problem.
I guess you haven't specified the eslint config file explicitly.
To run eslint on all the modules
run: eslint ../ -c .eslintrc.js
It seems like eslint is confused if it does not have the config file in the same directory it is running from, so you need to manually specify the path to it.
no real answer, except to create .eslintignore, .eslintrc, package.json at project root
The Situation
I'm working on a project in Node.js and using babel to transpile my code. My package.json has a build command defined like this:
"scripts": {
"build": "yarn run babel src -d lib",
},
The Problem
This transpiles fine, taking the content of src and outputing the result to lib, but there are two issues:
lib will contain old files from past transpiles even if they no longer have a matching file in src.
Babel will not rename files with a changed case if my OS is case insensitive. For example, if I had transpiled a file named src/Foo.js and later renamed it to src/foo.js then future transpiles will still be named lib/Foo.js
The Question
Can I tell babel to wipe away the contents of the lib directory before transpiling or do I need to just insert a rm into the build script?
Babel does not have functionality to do this. It is very common to use a rimraf or some other means to delete the directory before running Babel. rm directly is certainly also an option, but that does get more complicated if you want to support Windows too, hence the rimraf usage.
Babel CLI has a flag to remove the output directory: --delete-dir-on-start
Couldn't find any online documentation for it, but it's listed in babel --help:
--delete-dir-on-start Delete the out directory before compilation
Was added in this PR back in 2017.
I am using the npm scripts property / object to validate / lint my TypeScript files in my Angular2 project, you can see my npm run tslint task below:
"scripts": {
"tslint" : "tslint -c tslint.json app/src/**/*.ts -e app/src/**/*.spec.ts",
},
This all seems good as it is linting my actual app files, but not my tests (I will remove this later). However my real problem is that my main.ts file which is in the app/src/ folder and not one of the many subfolders app/src/*sub-folder* is not being included in the linting. How can I improve the wildcard above or tslint command to include typescript files in my app/src folder as well as those in any other subfolder?
If I haven't made myself clear please say so and I'll re-phrase the question.
Many thanks
I'm trying to figure out a workflow involving postcss. My need is to have css partials in one folder, watch them and output a bundle css file. The bundle css file must have include a base.css file at the top.
postcss has a --watch flag and can watch multiple files but can only output multiple files and not a bundle css file. I can use cat to combine all the files and use stdin to pipe them to postcss. But I can't trigger the cat command from postcss.
My files structure could look like this:
partials/
|_one.css
|_two.css
styles/
|_base.css
|_bundle.css
How would I, by using npm, arrange my script section to use CLI commands to achieve my goal?
My main issue is to figure out how to orchestra the build steps without one step blocking the next. A link to a working work-flow example would be great!
EDIT I got a solution working but it is very suboptimal as it can not be used with sourcemaps, can not have global variables and is a two step process. But I will outline it here in hope that someone can suggest a better approach.
Using the following structure:
build/
|_stylesheet/
|_default.css (final processed css)
partials/
|_one.css
|_one.htm (html snippet example)
|_two.css
|_two.htm (html snippet example)
styles/
|_base.css
|_bundle/ (css files from partial/ that is partly processed)
|_one.css
|_two.css
|_master.css (import rules)
I have a two step process in my package.json. First I make sure I have a styles/bundle folder (mkdir -p) and then I start nodemon to watch the css files in partials/. When a change occurs, nodemon runs npm run css:build.
css:build process the css files in partials/ and output them in styles/bundle/ (remember that I don't know how to watch multiple files and output one bundled file).
After running css:build, npm runs postcss:build which processes the master.css file that #import css files from styles/bundle/. I then output (>) the processed content from stdout to build/stylesheet/default.css.
{
"css": "mkdir -p styles/bundle && nodemon -I --ext css --watch partials/ --exec 'npm run css:build'",
"css:build": "postcss --use lost --use postcss-cssnext --dir styles/bundle/ partials/*.css",
"postcss:build": "postcss --use postcss-import --use postcss-cssnext --use cssnano styles/master.css > build/stylesheet/default.css",
}
You can check out watch and parallelshell packages from npm. I believe the combo of those two will do the trick. More on that here: http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/
Maybe you should consider using webpack instead to build a single css file and other resources which also has a watch flag. It is very efficient and you don't need to manually rebuild all the time after changes to resources/files.