I have been trying to get the IntelliSense activated inside VS Code.
When i do a gulp., it is not giving me options like task
You need to install gulp's typings file. I'm also not sure whether intellisense works without typescript for external modules.
npm i -g typings
typings init
typings install gulp --save-dev
After installing typings and:
typings install dt~gulp --global // --ambient deprecated use --global
Then click on green light bulb in bottom-right corner of VSC, and add a jsconfig.json file
Check out:
https://code.visualstudio.com/docs/runtimes/nodejs#_adding-a-jsconfigjson-configuration-file
You don't have to use
///
anymore... Also, you may need to close (using the "x") gulpfile.js, jsconfig.json, and package.json in the "Working Files" for jsconfig.json to recognize workspace.
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 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 using ubuntu 16.04. I have install polymer-cli npm install -g polymer-cli which is properly installed but when I enter command polymer server
it is throwing error that polymer:command not found.
To check if a package is globally installed you can take a look at the npm root folder.
npm root -g will show you the root folder
ls $(npm root -g) therefore lists all public installed packages.
If you do not find polymer-cli there then your global installation was not successful... if you find it there but you still can not use it you probably want to try to reinstall it.
For me the answer relied in the fact that the bin folder of node wasn't defined in PATH.
The fix for me was to add it to the export PATH= part in my .zshrc-file or, if you don't use ZSH, .bash_profile. To know what to add to this PATH export run npm bin -g. For me the output was /usr/local/Cellar/node/11.14.0_1/bin. After this I opened my .zshrc-file and added the :/usr/local/Cellar/node/11.14.0_1/bin to the PATH definition. Notice the : which distinguishes a new location.
export PATH="$PATH:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/mysql/bin:/usr/local/Cellar/node/11.14.0_1/bin"
Good luck!
If polymer-cli is globally installed successfully, change your path environment variable - add polymer.js' parent directory to it and polymer serve will work. You'll find polymer.js in .npm-global/bin
Does Webpack install -g, automatically install to nodeJS's package.json? Or is this only for local installs?
So I'm tired of trying to find workarounds for require() is not defined. Meaning I would need a module loader for my project to include modules client side. Well, I've downloaded the famous 'webpack' module loader, globally
npm install -g webpack
and I noticed it didn't install to "devDependencies" in my package.json file. But I also install webpack-dev-server, but locally,
npm install webpack-dev-server --save-dev
and it was saved into my package.json. Was this saved because I used --save-dev or because I installed locally?
I'm getting an error stating my webpack module I downloaded doesn't have a configuration file, so I'm assuming I install webpack wrong, and maybe it shouldn't have been installed globally. Please help with the understanding of globally and locally, as well as why this -g webpack install didnt get saved to the package.json?
The command npm install --gloabl will install a package in global scope and make it's bin command available to you globally. This has nothing to do with the folder or project your are in right now. That means a global install will not leave anything in any package.json files.
Learn more about npm install: https://docs.npmjs.com/cli/install
npm install -g webpack will save your files in your OS file system.
npm install webpack-dev-server --save-dev will save your package in your project directory inside a folder called node_modules.
The later one will make an entry in package.json file so that next time you can install all dependdencies with just npm install command. This command installs all your packages listed in package.json.
Missing Config file: Its looking for a file called webpack.config.js. More info can be found here: https://webpack.js.org/configuration/
I am trying to install a Ionic 2 template.
Following the readme gets until the point where I need to install typings dependencies. After the installation of the typings CLI with npm install typings --global, I should install all the dependencies stated in the typings.json package (already provided by the template in the project folder).
This is how the typings.json file looks like:
{
"dependencies": {},
"devDependencies": {},
"ambientDependencies": {
"cordova": "registry:dt/cordova#0.0.0+20160316155526",
"cordova/plugins/statusbar": "registry:dt/cordova/plugins/statusbar#0.0.0+20160316155526",
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#4de74cb527395c13ba20b438c3a7a419ad931f1c"
}
}
As stated in the title, it gives me No dependencies as output and it doesn not install anything contained in that config file.
Could it be something related to having installed typings with sudo as a global package? Maybe it is looking for a config file in another directory?
Thanks!
This is most likely the update from 0.* to 1.*. Check the release notes
https://github.com/typings/typings/releases/tag/v1.0.0
Changes
Many breaking changes (see https://github.com/typings/core/releases/tag/v1.0.0)
Renamed ambient to global
Updated typings/ directory structure (removed browser.d.ts by default, should use typings/index.d.ts by default)
Killed defaultAmbientSource (no more auto-install of DefinitelyTyped when using --ambient, explicitly use dt~)
Replace ! parser expansion symbol with ~ (! is a reserved bash symbol)
Ability to specify different resolutions and output directories using resolution in typings.json
Using tslint-config-standard for linting rules
Fixing it for me was just replacing "devDependencies" with "globalDependencies" in my typings.json.
I had the same problem. I had to install node.js again (there was a newer version when I installed it again, 6.2.0) with the installer, node-sass with npm (I don't know if you need this one) and then the installation of typings worked.