I'm trying to create an npm scripts configuration that compiles scss and uses browser-sync to reload the browser when files are written to the css directory.
The scss compilation works.
However, after the css is rewritten, browser-sync is not reloading the browser.
My package.json:
{
"name": "bob",
"version": "0.1.0",
"description": "testing",
"watch": {
"sass": {
"patterns": [
"./src/sass"
],
"extensions": "scss"
},
"bsReload": {
"patterns": [
"./src/css"
],
"extensions": "css"
}
},
"scripts": {
"dev": "concurrently \"npm run watch\" \"npm run bs\" ",
"bs": "browser-sync start --proxy \"http://mylocalsite.localdev\" ",
"bsReload": "browser-sync reload",
"watch": "npm-watch",
"serve": "http-server dist",
"sass": "sass --style=compressed ./src/sass/main.scss ./css/main.css"
},
"author": "Bob",
"license": "ISC",
"devDependencies": {
...
}
}
Related
I added vite to my project to run TailwindCSS. And now I am done and I wanted to build the project. But it only builds my index.html, not all my other pages (just using vanilla html and js). I know the line "npx tailwindcss init -p" to add the tailwind.config.js. Is there a command like this for Vite so i can say to build ./*.html?
{
"name": "tirisi",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "npm run build && vite preview"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.4.2",
"postcss": "^8.4.8",
"tailwindcss": "^3.0.23",
"vite": "^2.8.6"
},
"dependencies": {
"#tailwindcss/line-clamp": "^0.3.1",
"daisyui": "^2.11.1"
}
}
From https://vitejs.dev/config/
The most basic config file looks like this:
// vite.config.js
export default {
// config options
}
Just create that file and paste that in. There's no vite equiv to npm init or tailwind init
{
"name": "job_portal",
"version": "1.0.0",
"main": "index.js",
"devDependencies": {
"bulma": "^0.9.3",
"node-sass": "^6.0.1"
},
"scripts": {
"css-build": "node-sass --omit-source-map-url sass/mystyles.scss css/mystyles.css",
"css-watch": "npm run css-build -- --watch",
"start": "npm run css-watch"
},
"author": "",
"license": "ISC",
"description": ""
}
showing error:
An output directory must be specified when compiling a directory
I am trying to run a simple puppeteer script with jest.
Below is my package.json contents:
{
"name": "jest-puppeteer-project",
"version": "1.0.0",
"description": "Test framework using Jest and Puppeteer",
"main": "index.js",
"scripts": {
"test": "jest --forceExit"
},
"author": "Anil Kumar Cheepuru",
"license": "ISC",
"dependencies": {
"#babel/core": "^7.12.3",
"#babel/preset-env": "^7.12.1",
"babel-jest": "^26.6.3",
"jest": "^26.6.3",
"jest-puppeteer": "^4.4.0",
"puppeteer": "^5.4.1"
}
}
Below is my jest-puppeteer.config.js contents:
module.exports = {
launch: {
headless: false,
},
browserContext: "default"
};
I have also set preset: "jest-puppeteer" in my jest.config.js file.
Below is the error I am getting in the console when I am trying to run the script using the command: npm run test
I tried to look for a solution in various sources, but no luck. Can anyone please help me with this?
If you installed jest locally into your project, then this command:
"scripts": {
"test": "jest --forceExit"
}
won't find your locally installed jest. Try changing it to ./node_modules/.bin/jest --forceExit:
"scripts": {
"test": "./node_modules/.bin/jest --forceExit"
}
I'm trying to set up some form of auto-deployment using the npm package watch. Here is my package.json file:
{
"name": "frontend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start -p 60000",
"watch:start": "watch \"npm run start\" ./build"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
...
},
"devDependencies": {
"watch": "^1.0.2"
}
}
The app runs fine and it watches the correct folder, but when it detects a change, I get an infinite loop of EADDIRINUSE errors, because it is simply trying to re-run the app, not restart it.
How can I fix this?
I create my first npm package. I published it on npmjs and encountered the error of the lack of the 'postcss-import' module after installing the package in the project and running it. Tell me, where and in which file may the problem be? I tried all the ways and nothing works.Maybe something is wrong with these files?
This is the 'package.json' file of my package
{
"_from": "some_package",
"_inBundle": false,
"_integrity": "sha512-***",
"_location": "/some_package",
"_phantomChildren": {},
"_requested": {
"type": "tag",
"registry": true,
"raw": "some_package",
"name": "some_package",
"escapedName": "some_package",
"rawSpec": "",
"saveSpec": null,
"fetchSpec": "latest"
},
"_requiredBy": [
"#USER",
"/"
],
"_resolved": "https://registry.npmjs.org/some_package/-/some_package-1.0.1.tgz",
"_shasum": "***",
"_spec": "some_package",
"_where": "/home/user/vue/projects/package_name",
"author": "",
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"bundleDependencies": false,
"dependencies": {
"vue": "^2.6.5",
"vue-browser-detect-plugin": "^0.1.5",
"vue-element-resize-event": "^0.1.0"
},
"deprecated": false,
"description": "A Vue.js project",
"devDependencies": {
"postcss-import": "^11.0.0",
"postcss-loader": "^2.1.6",
"postcss-url": "^7.2.1"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"license": "ISC",
"main": "src/main.js",
"name": "some_package",
"private": false,
"scripts": {
"build": "node build/build.js",
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev"
},
"version": "1.0.8",
"repository": {
"type": "git",
"url": "git+https://github.com/user/some_package.git"
},
"bugs": {
"url": "https://github.com/user/some_package/issues"
},
"homepage": "https://github.com/user/some_package#readme"
}
This is the '.postcssrc.js' file of my package
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {}
}
}
You can try:
npm install --save-dev postcss-import