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"
}
}
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.
I am trying to install sass and I don't understand why I keep running into the issue shown below
I understand I should follow the instructions and run npm audit fix but when I run the command, I get an error of no package.json found, and yes, that is so because sass wasn't installed at all and thus no node-modules and the json file, how do I fix this issue?
Try running the npm init command at the root of your project to generate the package.json file and re run the command to install sass.
This is my first attempt at using a frontend package that uses Grunt/Bower.
I am specifically referring to a Wrapbootstrap theme.
I followed the instructions as follows:
npm install -g grunt-cli
npm install -g bower
npm install
bower install
I believe the process went fine. There were some deprecation warnings though.
What I ended up was with a file structure like this:
However, now I am lost as how to start.
The instructions says to do grunt live but it just opens up a blank page without anything on it. I opened every index.html in there but no luck.
Would really appreciate if you someone can set me on a path to realizing how to deal with the Grunt/Bower tools and how to troubleshoot this case.
Thank you.
I had previously installed gulp globally using npm install gulp -g. Then I cloned an existing project, and that required me to use its own gulp. Now when I do a gulp -v from outside my project folder, I get a mismatch like this.
C:\Users\userme>
[11:14:05] CLI version 3.8.11
[11:14:05] Local version 1.0.0
And when I do a gulp from my project folder, I get this.
C:\project\new\tools>
[11:14:26] CLI version 3.8.11
[11:14:26] Local version 3.8.11
Now I have not been able to merge my JS files properly using gulp (I'm getting some weird formatting errors in the min file) and I suspect it has something to do with this mismatch.
Is there a way to remove the global gulp version, but keep the project specific gulp?
Or can I update my global version gulp to #3.8.11?
Note - I did try updating the global gulp by using npm update gulp#3.8.11 -g but nothing happened. i still get the mismatch.
Update to describe the issue:
I am using gulp to merge multiple JS files into 1 single main.js file. The formatting that I get in the merged file has a syntactical error in it.
Expected output in merged file -
...
define('utils/knockoutBindings/slider',['require','ko','jquery'],function(require) {
'use strict';
var ko = require('ko');
var $ = require('jquery');
...
Actual output in merged file (this 1 line of code below is wrongly replacing the entire 4 lines above) -
...
var'utils/knockoutBindings/slider',['require','ko','jquery'],function(require) {
...
It might seem that there is an issue in the gulp code, but the same code is used by other users and it works well on their end. The only difference we have found is in the mismatch in my gulp versions.
I am answering my own question, just so it is useful for others.
Is there a way to remove the global gulp version, but keep the project specific gulp?
No. AFAIK, you are required to install gulp globally as well as one specific to your project.
More info on gulp versions here.
Why do we need to install gulp globally and locally?
http://blog.dwaynecrooks.com/post/110903139442/why-do-we-need-to-install-gulp-globally-and
https://github.com/gulpjs/gulp/issues/171
https://github.com/gulpjs/gulp/issues/140
Or can I update my global version gulp to #3.8.11?
Since I was facing a mismatch in my local version, I had to update it from the project folder itself.
npm install gulp#3.8.11 --save
More info on this here.
http://www.eskocruz.com/gulp-version-mismatch
To update your Local version npm install gulp#version_you_need
To update CLI version npm install -g gulp#version_you_need
Removing node_modules folder and running npm install gulp within that dir sorted my issue out.
npm install -g gulp wasn't fixing it for me, from either in or out of the project folder. My gulp version was already correct in my package.json file. All I had to do was run npm install from within the project folder, and the gulp version from in the project folder was corrected.
Updating both the local version same as that of the global version fixed the issue. My initial gulp -v yielded CLI version 3.9.1 and Local version 4.0.0. I updated the local version from within the project folder npm install gulp#3.9.1 --save. This resolved my issue .
Gulp 4 uses an updated CLI which needs to be updated globally. This CLI is backwards compatible with any Gulp 3.X projects you may have locally - Read more.
It seems that the latest version (at the time of this post) of gulp-cli is 2.3.0 which means there will always be a mismatch.
If you run npm install -g gulp, then the latest version of the CLI will be installed. If you have any other version installed then it will update to the latest version.
The local version's latest release (at the time of this post) is 4.0.2.
Run npm install --save-dev gulp to install the latest version of Gulp in your project folder as a dev-dependency. Like with the CLI version it will update if you have an older version.
Mismatched versions work like normal.
SIDE NOTE: Remember to prefix global installs with sudo if you're working on a Mac and you have admin rights e.g. sudo npm install -g gulp.
BUT if you don't have admin rights and you can update the local version, but not the global version, then you can run node ./node_modules/gulp/bin/gulp.js from your project folder and it will execute the gulp file, even if you have the wrong CLI version, but you need to have the default task set up.
I'v made a static single page site using grunt. I'm now trying to deploy it to heroku using the heroku-buildpack-nodejs-grunt for node grunt.
Below is a pic of my root directory:
Here's my Gruntfile package.json:
Procfile:
web: node index.html
When I run $ git push heroku master it gets to the Gruntfile and fails:
-----> Found Gruntfile, running grunt heroku:production task
>> Local Npm module "grunt-contrib-uglify" not found. Is it installed?
The above errors proceed to list all local NPM modules as not found. If I list all loadNpmTasks instead of using "load-grunt-tasks", I get the exact same error.
When I $ heroku logs I get:
Starting process with command `node web.js`
Error: Cannot find module '/app/web.js'
Can anyone see where I've gone wrong?
For anyone passing by here, I wasn't able to solve the problem. This is where I got to:
In my Gruntfile, I moved npm modules from devDependencies to dependencies. Heroku was then able to install these dependencies.
However, when Heroku ran the tasks, it stops at the haml task w/ error "You need to have Ruby and Haml installed and in your PATH for this task to work". Adding ruby & haml to the Gruntfile as engines did not work.
The only thing I can think of is that maybe Heroku installs your devDependencies first, tries to run Grunt, but since it didn't install load-grunt-tasks yet, you don't get the grunt.loadNpmTasks( 'grunt-contrib-uglify' ); line (which load-grunt-tasks does for you), and thus Grunt can't find the package.
Can you try changing your Gruntfile to explicitly list out all npm modules using the grunt.loadNpmTasks() method?
EDIT:
Just remembered another thing I had to do:
heroku labs:enable user-env-compile -a myapp
heroku config:set NODE_ENV=production
(Obviously replacing myapp with your Heroku app name.)
This makes Heroku allow user set environment variables and then sets your server to production. Try that, and set your dependencies and devDependencies as you had them originally (just to see if it works).
I am coming pretty late to the game here but I have used a couple methods and thought I would share.
Option 1: Get Heroku to Build
This is not my favorite method because it can take a long time but here it is anyway.
Heroku runs npm install --production when it receives your pushed changes. This only installs the production dependencies.
You don't have to change your environment variables to install your dev dependencies. npm install has a --dev switch to allow you to do that.
npm install --dev
Heroku provides an article on how you can customize your build. Essentially, you can run the above command as a postinstall script in your package.json.
"scripts": {
"start": "node index.js",
"postinstall": "npm install --dev && grunt build"
}
I think this is cleaner than putting dev dependencies in my production section or changing the environment variables back and forth to get my dependencies to build.
Also, I don't use a Procfile. Heroku can run your application by calling npm start (at least it can now almost two years after the OP). So as long as you provide that script (as seen above) Heroku should be able to start your app.
As far as your ruby dependency, I haven't attempted to install a ruby gem in my node apps on Heroku but this SO answer suggests that you use multi buildpack.
Option 2: Deploy Your Dependencies
Some argue that having Heroku build your application is bad form. They suggest that you should push up all of your dependencies. If you are like me and hate the idea of checking in your node_modules directory then you could create a new branch where you force add the node_modules directory and then deploy that branch. In git this looks like:
git checkout -b deploy
git add -f node_modules/
git commit -m "heroku deploy"
git push heroku --force deploy:master
git checkout master
git branch -D deploy
You could obviously make this into a script so that you don't have to type that every time.
Option 3: Do It All Yourself
This is my new favorite way to deploy. Heroku has added support for slug deploys. The previous link is a good read and I highly recommend it. I do this in my automated build from Travis-CI. I have some custom scripts to tar my app and push the slug to Heroku and its fast.
I faced a similar problem with Heroku not installing all of my dependencies, while I had no issue locally. I fixed it by running
heroku config:set USE_NPM_INSTALL=true
into the path, where I deployed my project from. This instructs Heroku to install your dependencies using npm install instead of npm ci, which is the default! From Heroku dev center:
"Heroku uses the lockfiles, either the package-lock.json or yarn.lock, to install the expected dependency tree, so be sure to check those files into git to ensure the same dependency versions across environments. If you are using npm, Heroku will use npm ci to set up the build environment."