I am total beginner in programming and just started to learn HTML/CSS.
For coding I started to use VS Code. And I really like it.
Only problem so far, what I got, is auto compiling of SCSS to CSS.
I have searched and read many solutions, and the best what I found was with ruby + sass + code in VS Code terminal sass --watch . It is watching my project and creating new CSS when new SCSS is created. And it is watching for changes in SCSS. But problem is that this code must be entered each time I am starting VS Code.
Tried also solution with Gulp file and package.json, but also could not make it start automatically. And it has to be made for each project separately.
I tried also Atom, and it has sass-autocompile package, and it works perfectly. So, simplest way for me would be to use Atom and forget. But I would like to use VS Code though.
So, generally question is if there would be possibility to create extension for VS Code to automate SCSS compilation to CSS (similar to Atom's package, which would be the best IMO). Or maybe somebody could explain me other way how to solve this problem.
You will need two things:
tasks.json file
Blade Runner extension for VS CODE
Start by creating .vscode folder in your project.
Then in it create tasks.json file with the following content:
{
"version": "0.1.0",
"command": "sass",
"isShellCommand": true,
"args": ["--watch", "."],
"showOutput": "always"
}
Now, after opening the project you can run the task by clicking Ctrl+Shift+B.
To automate the process use Blade Runner extension - https://marketplace.visualstudio.com/items?itemName=yukidoi.blade-runner
Blade Runner will run the task automatically after opening the project :)
A solution without additional extensions
With sass
Assuming you have sass installed globally with for instance:
npm install -g sass
Open the folder and create a task.json file under .vscode containing
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "Watch Sass",
"type": "shell",
"command": "sass --watch src/style.sass styles/style.css --style=compressed",
"problemMatcher": [],
"group": {
"kind": "build",
"isDefault": true
},
"runOptions": {
"runOn": "folderOpen"
}
}]
}
With node-sass
Replace sass with node-sass in the above.
In both cases make sure the source/destination filename, location and extension are correct (in my case src/style.scss and style/style.css)
With a Workspace file
Or copy the section in your .vscode-workspace file to avoid clutter of .json files.
Make sure to change the sass source and destination files to your personal needs.
Setup VSCode
[EDIT] whith the current version this is asked the first time you open the workspace file and the following steps are no longer needed.
To a llow automatic run tasks
Ctrl+Shift+P
select Manage automatic Tasks and
select Allow Automatic Tasks in Folder and
close and reopen your folder (or Workspace)
The sass compiler will be called and starts watching all your edits with a reassuring:
Compiled css\src\style.sass to css\style.css.
Sass is watching for changes. Press Ctrl-C to stop.
or with error messages when compilation failed.:
Error: semicolons aren't allowed in the indented syntax.
╷
7 │ padding: 0;
│ ^
╵
css\src\_base.sass 7:12 #import
css\src\style.sass 1:9 root stylesheet
Or use Easy Compile - it will auto compile on save.
https://marketplace.visualstudio.com/items?itemName=refgd.easy-compile
There already is an official document out there
https://code.visualstudio.com/docs/languages/css#_step-3-create-tasksjson
Only tip we can consider here is put an argument of --watch just not to build manually by hitting ctrl+shift+b every time.
// Sass configuration
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "Sass Compile",
"type": "shell",
"command": "sass --watch styles.scss styles.css",
"group": "build"
}
]
}
Without any plugins, you can create .vscode folder in your project and just write some tasks.json
Easy Compile or Live SASS Compiler extensions for Visual Studio Code.
The Live SASS Compiler can recompile all sources, whereas Easy Compile just compiles a single file.
Easy Compile compiles when you save a file, whereas Live SASS Compiler can be made to watch your code and compile when it sees a change. You must manually start it every time, whereas Easy Compile runs out of the box.
Related
newbie here learning how to use sass by building a dummy project. I am using command line to compile my main.scss file (which contains many imports from partials) into style.css file.
npm run compile:sass
Whenever I make changes in my sass files, the changes do not occur in CSS unless unless i save different files many times.
Even though i used watch script in my package.json (code attached and screenshot of the command file) file, and I followed 3 different tutorials on npm init, I believe there seems to be no mistake there.
I have tried restarting my windows again and again, I even restarted my command line. Also restarted my command line without the watch command. The only solution I could find is that i save different partials some 5 6 times which is somehow taking too much time. It took me 30 minutes to have that transition: all 0.2s line to process into the stylesheet.
I have a 512 gb ssd and 16 gb ram so computer speed does not seem to be an issue.
In the attached picture, picture 1 has everything saved but the transition property is not converted, in picture 2 you will find transition property is converted completely randomly after saving many times. After that you will find command line showing that sass code is compiling without any problem.
Screenshot:
https://i.stack.imgur.com/LHsSf.png
{ "name": "projectnatours",
"version": "2.0.0",
"description": "trying from scratch",
"main": "index.js",
"scripts": {"compile:sass": "node-sass sass/main.scss css/style.css -w" },
"author": "",
"license": "ISC",
"devDependencies": { "node-sass": "^4.14.1" }
}
try:
"compile:sass": "node-sass sass/main.scss -wo css/"
or:
"compile:sass": "node-sass -rw sass -o css"
I am trying to set the save location of my css file to its own css folder in the Live Sass Compile Config (Live Sass Compile > Settings:Formats)
I have tried setting the savePath to "/css" - After this - I tried saving my main.scss file, which is supposed to generate a css folder with a main.css file in it. However, it is just generating a main.css file in the same folder as my main.scss (which is in a scss folder).
I have tried uninstalling and reinstalling VSC but my previous settings were saved.
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css",
"window.zoomLevel": 0,
"editor.tabSize": 2,
"editor.wordWrap": "off"
}
The code above is all that shows in my .json file. The top 3 lines are greyed/blacked out (format to save path).
This display in my .json file is way different than what I'm finding in tutorials on this.
I strongly suggest you to avoid using that for sass.
Use node-sass instead. It's super easy to setup and run!
Just install it from command line:
npm i node-sass -g
And run it in the background:
node-sass [entry path-to-file] [output-path-to-file] -w
The -w watches for changes in your .sass or .scss file and compiles straight away!
In your settings.json rename the path form "\css" to "\\css"
Like this:
{
"format": "expanded",
"extensionName": ".css",
"savePath": "\\css"
}
Don't worry it's how VS Code understands file paths. Not your fault:)
Refresh the main css file for every change in your child scss files (ctrl+s)
Make sure you renamed your sass main file style.scss.
If your sass main file have underscore before name like _style.scss, your live sass compiler will not generate .css file.
So rename your main sass file from _style.scss to style.scss.
I have a simple ASP .NET 5 empty project - with npm and grunt installed.
I've used npm to install a few client-side libraries, at present located in the node_modules directory directly under my ASP .NET project.
I want to copy the relevant files (for example, jquery.min.js) from the node_modules folder into the wwwroot folder.
It's unclear to me how to use grunt to do this - as each node module has it's own dependency tree, and there doesn't seem to be any consistency in the file structure from package to package.
I could write a grunt task explicitly for each client side library I use, but in that case I may as well download everything manually and place the files where I need them manually, avoiding npm all together.
I know I could use bower, which has a flat dependency tree - which is probably the root I should go down - but I've read a few articles saying "there's no need for bower - npm can do it all" and therefore I would like to know if there's a way to do this purely with npm.
Is there a way? Or is the "npm can do it all" statement aimed at projects that will require the components directly from the node_modules?
TL DR; Is bower a better fit than npm for ASP .NET 5 projects with separation of source and build files, and if not, what's the recommended way of doing it purely with npm?
I don't fill me professional in grunt, but I use it myself and I think that I can explain you how one can use it corresponds to your requirements.
First of all you should add "New Item" to your project, choose "Client-Side" and "NPM Configuration file" to add package.json to the the project (in the same directory where you have project.json). I suppose you have already created the file, but the existence of the file is important for grunt too. Then you adds some dependencies, which you need on the client-side to "dependencies" part of package.json and add at least grunt and grunt-contrib-copy to "devDependencies" part. An example of the file you will see below
{
"version": "1.0.0",
"name": "ASP.NET",
"private": true,
"dependencies": {
"font-awesome": "^4.5.0",
"jquery": "^1.11.3"
},
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-clean": "^0.7.0",
"grunt-contrib-copy": "^0.8.2"
}
}
Now you should add "Grunt Configuration File" in the same way like you added "NPM Configuration file". You will create gruntfile.js (in the same directory where you have project.json). Finally you should fill gruntfile.js with more helpful code. For example the code
module.exports = function(grunt) {
grunt.initConfig({
clean: ["wwwroot/font-awesome/", "wwwroot/jquery*.*"],
copy: {
main: {
files: [
{
src: "node_modules/font-awesome/css/*",
dest: "wwwroot/font-awesome/css/",
expand: true,
filter: "isFile",
flatten: true
},
{
src: "node_modules/font-awesome/fonts/*",
dest: "wwwroot/font-awesome/fonts/",
expand: true,
filter: "isFile",
flatten: true
},
{
src: "node_modules/jquery/dist/*",
dest: "wwwroot/",
expand: true,
filter: "isFile",
flatten: true
}
]
}
}
});
grunt.loadNpmTasks("grunt-contrib-clean");
grunt.loadNpmTasks("grunt-contrib-copy");
grunt.registerTask("all", ["clean", "copy"]);
grunt.registerTask("default", "all");
};
registers two tasks: clean and copy and the aliases all and default. You can select gruntfile.js file in the solution explorer, open context menu and choose "Task Runner Explorer". You will see all defined tasks. The task with the name "default" will be executed if you execute grunt without parameters (without the task name) in the command line.
Now you can choose some task and run it. You can choose some task, click right mouse button to open context menu and check "After Build" in "Bindings":
Now the task will be executed every time when you build the project. You can click optionally "V" button on the left side to see verbose information from the executed tasks.
I hope it's already the main information which you need. Many other helpful information about plugins grunt-contrib-clean, grunt-contrib-copy, grunt-contrib-jshint, grunt-jscs, grunt-newer and many other you will find yourself. One official place of ASP.NET 5 documentation should be mentioned. It's the place.
P.S. You asked additionally about the usage of bower. I find both npm and bower not perfect, but still very practical. I would prefer to hold full control over the dependencies and especially about the data, which will be copied under wwwroot. Thus I change the content of .bowerrc file from { "directory": "wwwroot/lib" } to { "directory": "bower_components" } and I use grunt to copy the required data from bower_components in the same way like I do this with files from node_modules. See the article for more details. In other words I use packages published only in bower repository in the same way like I use npm packages.
Title says it all. I still use Grunt, though it feels like I should be using Gulp.
Nonetheless, rather than alt-tabbing to a CMD window, I'd like to use the palette or shortcut keys to kick off some Grunt tasks. Reading the docs, it looks like I'd need to write a json task. What??? That's like writing a Grunt task to run a Grunt task.
Has anybody else already written a generic VSCode task for running Grunt?
EDIT:
Thanks to the accepted answer, here is what I'm running:
{
"version": "0.1.0",
"command": "grunt",
"isShellCommand": true,
"tasks": [{
"taskName": "default"
},{
"taskName": "stage"
},{
"taskName": "dist"
}]
}
I open the palette, and see default, stage, dist. Not sure if that's the best way, but it works so far. Definitely room for improvement.
The most recen update to VSC has auto-detects grunt (and gulp tasks) so you can now just use cmd+p then type task (notice the space at the end) and VSC will show you the available tasks to run.
More info at: https://code.visualstudio.com/Docs/editor/tasks
In the default tasks.json file, you can just modify the gulp example to be used for grunt. In my current project, I just need to run grunt in the root directory, so mine looks like this:
{
"command": "grunt",
"isShellCommand": true
}
You can also modify the existing tasks option to add specific tasks to run in your build.
Now (version 1.24.1+), there is a Tasks Menu. Run Task will give you a list.
I'm evaluating task runners, Grunt and Gulp in particular, but there's one thing I dislike about both of them: the fact that they require a package.json file for your project. This is even though your project might not even be an npm project in the first place. In my case, I'm already using composer.json, which basically does the exact same thing.
I ended up creating my package.json like this:
{
"name": "myproject",
"version": "0.0.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-phpcs": "~0.2.3",
"grunt-phplint": "0.0.5",
"grunt-phpdocumentor": "~0.4.1"
}
}
Note that I'm not maintaining the version number, as that is unnecessary overhead. This works though, in the sense that I can run my grunt tasks after executing npm install. I feel that I should be able to do without this file though. I read that it's possible to use Grunt without a package.json, but my take is that you'd then have to install the node modules manually, which is more overhead. Gulp is no different, or at least I found no evidence to the contrary.
So the question is, are there any task runners that don't require you to define your project's metadata twice, need only a single file, and are not too bleeding edge?
Answering myself, the only thing I could find that seems to fit my requirements is bldr. It is PHP based, uses composer as package management backend, and does it without hijacking the composer.json you might already be using, as it uses bldr.json instead. It also does not require you to add metadata to the file that describes your bldr dependencies. Here's an example dependencies file (taken from http://docs.bldr.io/en/latest/blocks.html):
{
"require": {
"acme/demo-block": "#stable"
}
}
Then, when you run bldr install, your dependencies are installed and you can run your bldr tasks.