I tried to install gulp autoprefixer following a tutorial, however, the autoprefixer is not prefixing. I searched for solutions for hours, but still cannot get it work. I am certain that there should be prefix added to my CSS file, since I use the 'display: flex' property. Below are the steps of my installation:
npm init
sudo npm install gulp -g
touch gulpfile.js
npm install gulp --save -div
npm install gulp-autoprefixer --save -dev
edit the gulpfile.js shown below and execute it:
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
gulp.task('autoprefix', function() {
gulp.src('test.css')
.pipe(autoprefixer())
.pipe(gulp.dest('prefix'))
});
I think I successfully installed the gulp-autoprefixer because I can see it in the depencencies in the package.json file shown below:
{
"name": "autoprefixer",
"version": "1.0.0",
"main": "index.html",
"dependencies": {
"autoprefixer": "^9.3.1",
"gulp-autoprefixer": "^6.0.0"
},
"devDependencies": {
"gulp": "^3.9.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"description": ""
}
The execution of gulpfile.js output a .css file in the newly created 'prefix' directory, however, there was no prefix added, the content looked exactly the same as my original .css file. I have no idea why the autoprefixer does not work, please leave a comment if you have any idea, thanks!
Related
I'm building a Node.JS project that uses both Python and NPM dependency modules.
The Node.JS modules are located within package.json and the python dependencies are inside a file requirements.txt.
I would like to install all the dependency modules (Python and Node.JS) from within package.json by running npm install.
Is this possible and how?
Thanks in advance!
The files look like below.
package.json:
{
"name": "app",
"version": "1.0.0",
"description": "Trial app",
"main": "bin/index.js",
"scripts": {
"dev": "npm install",
"start": "node app.js",
"test": "jest --forceExit "
},
"keywords": [
"AI",
"Blockchain",
"Decentralized"
],
"dependencies": {
"peerjs": "^1.3.2",
"redis": "^3.1.2",
"socket.io": "^4.1.2",
"socket.io-client": "^4.1.2",
"wrtc": "^0.4.7"
},
"devDependencies": {
"#babel/core": "^7.16.7",
"supertest": "^6.1.6"
}
}
requirements.txt:
Django==2.2.21
djangorestframework==3.7.7
django-rest-swagger
coreapi
You can define Commands to run within the "scripts" section of your package.json. Every script in there can be run with npm run [scriptname].
So you could do (&& runs another command after the first one)
"scripts": {
"install": "npm install && pip -r requirements.txt",
"dev": "npm install",
"start": "node app.js",
"test": "jest --forceExit "
}
And run npm run install
Replace "dev": "npm install" with "dev": "npm install & pip install"
Add "preinstall" entry to scripts.
npm, yarn and pnpm will automatically execute preinstall script before installing dependencies and 'devDependencies`:
package.json:
{
"scripts": {
"preinstall": "echo 'Installing Python Dependencies...' && pip install -r requirements.txt && pip install -r subproject/requirements.txt"
},
...
}
To install both npm and python dependencies, just run:
$> npm install
Installing Python Dependencies...
Also, there are other hook scripts in npm process, like "prepare", which might be useful. And scripts can be chained with ... && npm run <script>, so the "scripts" section can be organized into small atomic ones and built up by chaining them. I use "scripts" as a project's build and deploy active knowledgebase, replacing make file functionality not only in JS, but even in pure Python projects.
It is also possible to hook "package.json" into python script, i.e. create something like "build_project.py" script (or whatever name that works for you, I've used "make.py" and "build.py" for less typing) specific to the project, add all python-related stuff there, and run the npm commands from it. It may be more coding than using "scripts" section in "package.json".
Problems
I'm trying to publish my own SDK in npm. When I'm trying to install my packages, my dist folder only shows index.js
Code:
Here is my package.json file. It already includes main and files, https://docs.npmjs.com/cli/v8/using-npm/scripts.
{
"version": "0.1.4",
"license": "MIT",
"main": "dist/index.js",
"typings": "dist/index.d.ts",
"files": [
"dist"
],
"engines": {
"node": ">=10"
},
"scripts": {
"start": "tsdx watch",
"build": "tsdx build",
"test": "tsdx test --passWithNoTests",
"lint": "tsdx lint",
"prepare": "tsdx build",
"prepublish": "tsdx build",
"size": "size-limit",
"analyze": "size-limit --why"
},
"peerDependencies": {
"react": ">=16"
},
"husky": {
"hooks": {
"pre-commit": "tsdx lint"
}
},
"name": "#grammable/sdk",
"author": "peanut butter jelly",
"homepage": "https://github.com/grammable/grammable-sdk",
"repository": "https://github.com/grammable/grammable-sdk",
"publishConfig": {
"access": "public"
},
"module": "dist/grammable.esm.js",
"size-limit": [
{
"path": "dist/grammable.cjs.production.min.js",
"limit": "10 KB"
},
{
"path": "dist/grammable.esm.js",
"limit": "10 KB"
}
],
}
I removed my devDependencies and dependencies to remove unnecessary lines. Can someone help me?
This is my folder structure.
folder
Update: I have tried using npx npm-packlist. It has everything I need, but when I npm publish it, it only builds index.js
Edit 2:
npm notice 📦 #grammable/sdk#0.1.4
npm notice === Tarball Contents ===
npm notice 35.1kB LICENSE
npm notice 237B README.md
npm notice 184B dist/index.js
npm notice 1.6kB package.json
npm notice === Tarball Details ===
tl;dr: When a .npmignore file is not specified, npm will use your .gitignore file setting, where dist and the files in it are likely to get ignored.
Your dist/index.js isn't ignored by this rule because you specified it in the main field of your package.json.
And there is this particular part in npm doc about the files field in package.json also explains more clearly why this behavior happens.
Some special files and directories are also included or excluded regardless of whether they exist in the files array.
According to this answer the issue can be solved when you specify your own .npmignore file.
here is my package.json:
{
"name": "cypressautomation",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "/node_modules/.bin/cypress run "
},
"author": "",
"license": "ISC",
"devDependencies": {
"cypress": "^9.2.0",
"mochawesome": "^7.0.1",
"mochawesome-merge": "^4.2.1",
"mochawesome-report-generator": "^6.0.1"
},
"dependencies": {
"cypress-iframe": "^1.0.1"
}
}
I have built some test scripts, and after I saved all files and run npm run test I get the error:
cypressautomation#1.0.0 test > /node_modules/.bin/cypress run
The system cannot find the path specified.
You might be facing issues with relative/absolute path conventions.
First let us cover the basis. From the command line at the folder where the package.json file is located, run npm install for the packages to be downloaded into the local node_modules folder.
You could change the command on package.json to:
"test": "cypress run"
this way we leave npm to figure out where cypress is located (will be in the node_modules folder and npm 'knows' about it)
then try the test command again:
npm run test
I hope you are trying to run project in correct path. if your npm run test is not working, first in command prompt try running command then add the same in package json.
I use this coomand to run project ./node_modules/.bin/cypress run
I have created git repository which will be used as npm package in other project. Lets say that sharable repository name is genesis-service-broker.
I am using this shareable repository inside one of the service(activation service). In this project, I am installing package using yarn. Its running perfectly fine here.
"dependencies": {
...
"genesis-service-broker": "git+https://${key}:x-oauth-basic#git.my_project.com/${user}/genesis-service-broker.git#create_service_broker_for_genesis",
...
}
When I am trying to use genesis-service-broker package inside onother service(partner service) its not able to install the dependencies. In this project, I am installing dependencies using npm. If I install dependencies using yarn its working perfectly fine.
I am not getting any errors in npm install command. I am just not able to find genesis-service-broker folder inside node_modules, when I am installing dependencies using npm.
package.json file inside genesis-service-broker repository. (for reference purposes)
{
"name": "service-broker",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git#git.my_project.com:amol.barewar/service-broker.git"
},
"author": "",
"license": "ISC",
"dependencies": {
"config": "^3.2.5",
"form-data": "^3.0.0",
"node-fetch": "^2.6.0",
"request": "^2.88.0",
"uuid": "^3.4.0"
}
}
there is a difference in behaviour here, between yarn and npm
yarn add retains the name of the git project in dependencies, and creates a folder with the same name in node_modules.
So, yarn add git+https://${key}:x-oauth-basic#git.my_project.com/${user}/genesis-service-broker.git#create_service_broker_for_genesis will lead to a module getting installed as node_modules/genesis-service-broker
On the other side, npm install gets the name from the name property in package.json; and it will lead to module getting added as node_modules/service-broker in your case... and also the dependencies map will be like
"dependencies": {
...
"service-broker": "git+https://${key}:x-oauth-basic#git.my_project.com/${user}/genesis-service-broker.git#create_service_broker_for_genesis",
...
}
Because of this difference, the requires(...) might fail.
As, in this case, with yarn that module will be available through -
require('genesis-service-broker')
And for npm through -
require('service-broker')
So, all in all, it will help to keep the name property in package.json same as the project name.
The sass folders and files are in the correct place. What is wrong?
I have the package.json which I created, with this code in there.
{
"name": "starter",
"version": "1.0.0",
"description": "starter file",
"main": "index.js",
"scripts": {
"compile:sass": "node-sass sass/main.scss css/style.css -w"
},
"author": "Nez",
"license": "ISC",
"devDependencies": {
"node-sass": "^4.12.0"
}
}
As you can see the script is called compile sass when I try to run it it keeps giving the error
npm ERR! missing script: compile:sass
I have the sass compiler installed already as a dev dependency
I had this happen as well. The only way I could fix it was to move my files out of my dropbox folder on an external hard drive and move them to my main computers' hard drive. I think it has something to do with Dropbox, but I'm not sure.
One of your sass files has a syntax error
eg.
file 1 has
background: %pink
the %pink value is undefined you should check your files if %pink* is implemented
I had the same issue and tried everything until I simply saved the project files within my code editor and then all of a sudden it worked.
Add this to your code all you need to do is add npx before your node
I.e. npx node...
Then go to your terminal to that directory and run this command npm run compile:sass
Hope this works...because it worked for me will work for you too
I think you should check your file path
After 3 years!
for me it's solved by rewriting the package.json "scripts" line :
"compile:sass": "node-sass sass/main.scss css/style.css -w"
Go to package.json
Add below lines
"scripts": {
"sass": "sass sass/main.scss css/style.css",
"test": "echo \"Error: no test specified\" && exit 1"
},
For compilation use command:
npm run sass
Note: I have used main.scss as source file name