I'm using Gulp to compile and minify SCSS, Pug, JSX and that sort of things. So in the development process as usual I'm opening the terminal window and typing gulp and it watches my files. But I have to keep open the terminal window and Gulp tab, otherwise my files don't be compiled.
I'm using PM2 too. When I wanna start a Node job I just write pm2 start file.js --watch and pm2 startup in order to start the script on operating system opening. I wanna do the same thing for Gulp. I've tried like pm2 start gulpfile.js --watch, but it doesn't work.
How can I use Gulp with PM2?
I am no expert in gulp, but you can execute your gulp command via pm2 by defining it in the process file at your project root.
ecosystem.json
{
"apps": [
{
"name": <name_of_your_app>,
"script": "gulp"
}
]
}
Then, from terminal, run $ pm2 start ecosystem.json. You can also define watch options at that process file. See this for more details.
Related
I am new to SCSS. I love using SASS for my local development, but when I publish a client’s website and need to make a change, it’s a pain to have to dig out the old project and set everything up so I can edit locally and then publish those changes on the production site.
Currently, I make changes in the SCSS file and then I go to online SCSS to CSS converter tool and convert SCSS to CSS and then put that CSS into CSS file.
Is there any way that if I make a change in the SCSS file in the server then it should directly update the CSS file?
Currently, I use HTML, CSS, SCSS, and Javascript
Thanks,
Use sass package instead of VSCode Extensions like Live SASS Compiler.
Why should not we use "Live SASS Compiler" VSCode extension?
Live SASS Compiler extension is old and hasn't been updated for a while.
Some features like #debug, #warn, #error won't work, so if you are using it, you have to use the sass npm package for that.
So, How to install the sass package?
So simple, just run these commands.
npm install -g sass
And convert SASS to CSS automatically by running the below command on your terminal.
sass -w source/stylesheets/index.scss build/stylesheets/index.css
More information is available on the sass docs here
Source - https://pineco.de/the-simplest-sass-compile-setup
By - Adam Laki
Make sure your project has a package.json file (and you have Node installed on your machine). Run npm init if you have Node but not package.json file, to initialize one.
Install sass package:
npm install sass --save-dev
Learn more about the package and its CLI
In the package.json file's scripts section, add these:
"scripts": {
"sass-dev": "sass --watch --update --style=expanded assets/css",
"sass-prod": "sass --no-source-map --style=compressed assets/css"
},
Run scripts:
npm run sass-dev
// or
npm run sass-prod
What is a source map? A particular file that allows the browser to map back from the processed, concatenated files to the original ones. It is helpful because we can see the original file names when we debug the CSS in the developer tools.
The above is a very basic setup to compiling SCSS files and "watching" them for changes. Your server should have a pipeline or some sort of build system that it would be able to run this npm command in order to compile SCSS files, so theoretically you don't need to push your pre-compiled CSS files to the server, but it does it by itself.
Trying to install gulp. But when check using gulp details command, then getting error like Task 'details' is not in your gulpfile. Is anybody face similar issue.
It is looking for task "details" in your gulpfile.js. You can run gulp --tasks to see what tasks are available, but you are for sure not going to see "details".
Here's how to create and define gulp task
So basically, you at least need something similar to the following snippet within your gulpfile.js
function details(callback) {
callback();
}
exports.details = details;
Or, if using require-dir for better folder structure, you would need the previous code snippet within the referenced file :
require('require-dir')('./gulp/tasks/details');
And when using npm to run your task, like npm run details
You can find those scripts definition in your package.json file at your project root. There is a node scripts where you can define npm script, where you could be calling the gulp details task
...
"scripts": {
"details": "gulp details",
},
...
You could run npm run details, and it would behind the scene run the gulp task.
I got my one website on WordPress and had no code at all to be written myself. And now I decided to move one, write my own website, but stuck with some issues with Gulp after installing ("no command 'gulp' found") The most common reason met for Windows is the wrong PATH, and I've changed it. Any other thoughts? That's supposed to be just a starter kit for an auto page reload when HTML, CSS, JS is changed.
this sounds like you only have gulp installed inside your current project.
First Solution:
Simply install gulp-cli globally. This will allow you to use gulp command
note: gulp still need to be installed per project basis.
npm install -g gulp-cli
Second Solution:
in case you don't want to install gulp-cli globally, you can add it as your build script inside your package.json. And then you can run npm run build from your terminal.
{
"script": {
"build": "gulp"
}
}
I am not able to understand why pm2 starts my ghost blog in developement instead of production.
I can run this
npm start --production and everything is fine like I want it. But if I try to use pm2
pm2 start index.js it starts my blog in developement which I don't want to. I must be blind but can not see in the docs how I can force pm2 to start in production mode.
I only have success starting the app with npm like this:
npm start --production
I tried with a config file ecosystem.config.js and to start it like this:
pm2 start ecosystem.config.js or
pm2 start ecosystem.config.js --env production but it seems to start in developement. Here is my config file.
module.exports = {
apps : [
{
name : "asle",
script : "index.js",
env: {
COMMON_VARIABLE: "true"
},
env_production : {
NODE_ENV: "production"
}
}
]
}
Because ghost blog always runs in development mode by default. If you want to run it with pm2 in production use following command
NODE_ENV=production pm2 start index.js
You can also read in my blog post: https://drifts.io/how-to-setup-ghost-blog-on-vps/#step5installpm2processmanager
Also dont forget to use pm2 startup and save to make sure it persistent over reboots.
Have you tried to create an ecosystem file to declare how you want to launch in production ?
http://pm2.keymetrics.io/docs/usage/application-declaration/
If yes can you show it ?
I have checked out a repo, run npm install and tried to run Gulp but I get this error:
[16:33:00] Directory "/Users/myname/project/folder/web/js-tasks" does
not exist.
If in the terminal I go cd /Users/myname/project/folder/web/js-tasks then it takes me to that directory with no problem. Ive tried running the gulp task as sudo incase its permission but I get the same result.
The gulpfile.js is at ~project/folder/web. I am on a mac and I am using Vagrant. I am trying to run this from the host machine but if I SSH into my Vagrant machine, cd to where the gulpfile.js is and run gulp log I get a similar error Directory "/web/js-tasks" does not exist.
Many times when I faced problems with gulp scripts - I use WebStorm IDE to debug them.
Fortunately WebStorm have debug feature for gulp tasks.
After you set breakpoint in your gulpfile.js, you need to:
Open Gulp panel in WebStorm
Right click on task you need to debug
Click "Debug ..." in context menu
When debugger stops on breakpoint you can manually check how Gulp "see" your file system by evaluating JS expression fs.readdirSync("/Users/myname/project/folder/web/js-tasks") in "Watches" panel.
It turns out whenever there is any error in the gulp file that stops it running then I get this message instead of a proper error message.