how can I render pug(jade) to html in npm scripts? - javascript

I am trying to build my package.json file, and I am having a difficult time when it comes to writing scripts.
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build-css":"node-sass --output-style compressed -o build/styles src/styles",
"pugtohtml": "npm pug -D index.pug"
},
this doesn't work
I've installed the pug package and now I want to automate the task using just npm can you please help me with that and I would appreciate it if you give me tips and resources of how to learn writing scripts and automating tasks using just npm, thank you!

You must write the task like this
"pugtohtml": "pug --output-style compressed -o dist/html/ assets/pug/*.pug"

It looks like the command line client is required to use this with NPM scripts.
Per the Pug NPM page:
Package
npm install pug
Command Line
After installing the latest version of Node.js, install with:
npm install pug-cli -g
I'm using npm install pug-cli --save-dev instead because I prefer packages to be installed local to the project I'm working on, but YMMV.
If you're into the global (-g) thing, you might not need the pug-cli package for command line handling, and you could possibly use the other solutions mentioned here.

Related

How can I run a yarn app/How to run a yarn dev server?

I've always used just npm and never yarn/webpack explicitly. I need to run the code from this repo:
https://github.com/looker-open-source/custom_visualizations_v2
Like a dev server or something to ensure it's serving the files properly but I don't see a "run" like npm run start. Does this just not exist with yarn? It feels like this code should work as is and I shouldn't have to add anything.
EDIT: I've now tried yarn run watch but it just seems to build the code again and not actually host anywhere
npm run somecommand just looks up in the "scripts" field of package.json for the key
somecommand and executes the value in the terminal.
So npm run start basically runs the start script from package.json
The same thing is done using yarn via simply yarn start
In the linked repo, there isn't a start script in the package.json, rather a watch script, so you should be able to run it with the below steps:
yarn to install dependencies after cloning the repo to local (similar to npm install)
yarn watch to start the webpack server (analogous to npm run watch)
Edit:
Turns out the watch command is just setting up webpack to watch for changes and recompile the project every time there is a change.
To run a development server, you will need to add another script preferably with name start and use webpack-dev-server
So the package.json has entries like:
...
"watch": "webpack --config webpack.config.js --watch --progress",
"start": "webpack-dev-server --config webpack.config.js",
...
Then running yarn start should open a dev server at localhost:8080

Difference between npm run dev and parcel index.html

I can use parcel index.html to create a local development server, bundling and hot module replacement. But it have come to my attention that using npm run dev does kind of the same think, so my question is:
what is the difference between the two? and how npm run dev is making the bundling process?
NPM vs Parcel isn't a valid comparison. They are two separate things. You can use Parcel with both NPM and Yarn.
Parcel is a web application bundler that is comparable to Webpack
NPM is a package management system for node.
npm run * is a command that will execute any npm script specified within your package.json and has no exclusivity to Parcel. You can of course make an npm script that will execute Parcel commands.
If you go into your package.json file, you will see a scripts property. Within this object, you can define arbitrary scripts to run. There are reserved script names such as start, install, build among others, but for the most part, this is a "free-for-all" that enabled the developer to specify any arbitrary scripts to run. A few common scripts that you'll typically see scripts to bundle your project or run a linter.
Example of package.json
Webpack Example:
{
"scripts": {
"build": "webpack --config <your entry file>"
}
}
Parcel Example:
{
"scripts": {
"build": "parcel build <your entry file>"
}
}

how to use jquery after running "npm install jquery"

Hi I use npm install jquery to install a jQuery for my project.but i find it is located in node_modules\jquery with many unwanted files.
but I just wana put node_modules\jquery\dist\jquery.min.js into static\jquery folder
what is the best and common way? copy and paste manually?
You can use npm to do this. In your package.json, add the following to the scripts key
...
"scripts": {
"build:jquery": "cp node_modules/jquery/dist/jquery.slim.min.js static/jquery/"
},
...
Then you can run: npm run build:jquery
You can add more build tasks to this section as you need them such as copying images and minifying scripts and css, then chain them together in a single command with npm-run-all:
$ npm install npm-run-all --save-dev
And...
...
"scripts": {
"build:jquery": "cp node_modules/jquery/dist/jquery.slim.min.js static/jquery/",
"build:images": "cp -R src/assets/images/ static/images/",
"build": "npm-run-all -p build:*"
},
...
Then run npm run build
npm is a great build tool and often bypasses the need for an additional build framework such as Gulp or Grunt. It can also handle file watchers and such to rebuild when things are modified automatically.

npm environment or shell to run dependent modules locally

Does npm has a shell or environment inbuilt, which can be used to run node modules installed locally ?
Ex:
I have nodeunit, eslint and other packages listed in my dependencies. I can run commands provided by these dependencies from npm scripts like:
"lint": "eslint .",
"test": "nodeunit test/*js",
These commands cannot be run outside npm scripts. I know, with a small configuration we can achieve this (by updating the PATH with node_modules/.bin), but I am wondering if there is npm way of doing this (something like npm shell which would enable this).
In other words:
In my project dir I will not be able to run this: nodeunit . because nodeunit is not available in the PATH. When I execute npm test, npm adds node_modules/.bin to PATH, hence nodeunit is available under npm test script. My question is: Is there a npm way which will enables us to execute these commands in the project directory without using them in npm scripts

How to use Grunt/Gulp with pm2?

pm2 is a great tool to manage node apps. How does it work with grunt/glup ?
I didn't find any useful clues after Googling for 20 minutes.
If I understand your question well, it seems you want to deploy your app.
Since pm2 0.9 deployment can be done with pm2 deploy see README.
In the case of grunt/gulp, I see two options:
You've your node_modules comitted. Using pm2 deploy run your gulp process from the post-deploy section:
"post-deploy" : "node ./node_modules/gulp/bin/gulp.js ./GulpFile.js && pm2 startOrRestart ecosystem.json --env production"
Using a basic script that will launch npm install for you, you could use the package.json to grunt/gulp:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js",
"postinstall": "./node_modules/bower/bin/bower -q -s -f install && ./node_modules/gulp/bin/gulp.js"
},
My gulp generally needs bower to minify scripts so I left it only for example purpose.
You may combine the two options to let pm2 deploy install your npm scripts and have a postinstall script in the package.json.
Note that I'm using the relative path to the gulp module binary! It's just to avoid an issue if the global module is not installed.
Now, in my opinion to deploy an application in production it's better to simply have a git branch where everything is pre-gulped so that you only clone that branch and you're good to go. It also improves the deploy time, especially if you're running tests with gulp or grunt...
Hope that's clear enough!
The Reply may be late it must be usefull to others
On the command line do:
$ export NODE_ENV=production
will setup production environmental
$ grunt build
will create necessary min.js and min.css
$ pm2 start server.js
will load the server with pm2 , that its a package thats makes sure the node server will restart if an error and will log.

Categories

Resources