ASP.NET 5 has a folder named Dependencies->Bower which the default Web template contains things like bootstrap, hammer.js, and jquery. These dependencies are copied to a lib folder according to gulpfile.js.
var paths = {
bower: "./bower_components/",
lib: "./" + project.webroot + "/lib/"
};
For some reason my site is missing all the styling and client behavior (carousel) that used to work fine, and the lib files appear to always be blank documents now. Does the gulpfile.js run during a VS build? Is there something else I need to do to re-copy these files to lib?
Go to the Task Runner Explorer in Visual Studio, right click on the copy task, and click run.
I'm not sure how the files got removed or why this was necessary, but it does fix the problem.
Related
I am trying to move away from WebStorm and trying to configure VS Code to get few functionalities of WebStorm. I am trying to implement File Watcher functionality in VS Code.
I used to have File Watchers for Jade and Stylus in WebStorm. I already have gulp tasks for them and have added them in tasks.json as well. I have even provided keybindings for them too. But I have to run them manually. What I want is, whenever a file is saved, it checks whether it is a Jade file or a Stylus file and then run the appropriate task to generate either HTML or CSS file.
Is it possible to do it in VS Code yet? If yes, then how can I do that?
You must create an extension to accomplish your scenario. You said you already have gulp and task.json with your automation, so I think it would be relatively easy to translate that to an extension.
You should take care with this points when creating your extension
package.json
You extension should work for Jade or Stylus, so the package.json file should have:
"activationEvents": [
"onLanguage:Jade",
"onLanguage:Stylus"
]
OnSave Event
There are two events that you could use to detect file saving: onDidSaveTextDocument or onWillSaveTextDocument, depending on your needs.
FileWatcher
VSCode has a built in FileWatcher, you just have to create it via vscode.workspace.createFileSystemWatcher. The point is that it just monitors files within the opened folder/project.
If you need to detect changes outside, you should use fs.watchFile or chokidar.
Publishing/Installing
Don't worry if you think your extension only works for you or you can't publish on marketplace, for any reason, because you can create your own extensions, package them and install locally.
Is there a way to format correctly HTML in VSCode when we use Twig or Swig tags, like
{% if ... %} {%else%} {%endif%} {% for %} {%endfor%} {% include %}, etc...
For now code formatters remove all line breaks before and after those tags.
Was not able to find an suitable extension for that.. Neither a way to configure the internal code formatter.
I had the same problem and solved installing this extension:
Twig Language
Install it, restart the editor and ff you are on windows you can format with standard ALT + SHIFT + F.
Hope it helps.
I've been struggling SO MUCH with this, and finally found a fully working solution; so wanted to share it here. Follow the steps below and you should be good to go:
Download the Vs Code Extension Prettier Code Formatter. Pay close attention to grab this Prettier Package, as Visual Studio proposes several different Prettier Extension Packages.
In the Visual Studio Editor, go to Settings --> type "format" until the formatting settings pop up, and then select Prettier Code Formatter - esbenp.prettier-vscode as your default formatter. Do this for both the User as well as the Workspace tab, if not automatically done.
Next, you'll need to add the melody plugin used for the proper formatting of twig files using Prettier in Vs Code. This is actually a nodejs package, so you first need to install Node JS. It can occur that you will run into permission issues when installing node packages later on. To try to avoid this at max, install node using a nvm.
Now you can install the melody plugin. To do so, follow the instructions of the linked repository. Note that you previously need to install yarn if you don't have it already installed, via npm install --global yarn.
To hold project-specific formattings within your github repo / project, you can add a .vscode/settings.json file which holds the general prettier configs you're currently using in your project. That's pretty useful to share the prettier formatting settings across developers / repos.
Also add the .prettierrc file to your projects root, with the following content:
{
"printWidth": 80,
"tabWidth": 4,
"plugins": ["./node_modules/prettier-plugin-twig-melody"]
}
This defines the additional use of the above-mentioned plugin. You may adapt the configs according to your needs. You can either put your node_modules folder holding the package within it into your local project, or adapt the path as needed to wherever your melody plugin is located on your local machine.
FYI: The node_modules folder is normally not uploaded to project repos due to its size. Once you install node, you will automatically get that node_modules folder on your local machine. And when you then install the above-mentioned package, it should get installed into that node_modules folder.
Now add the Twig Syntax highlighting package from whatwedo. Now, VS Code should recognize Twig files when you open them. Verify this by opening a .twig file within VS Code and checking in the bottom right corner that the file is recognized as HTML (Twig). This will additionally highlight your swig tags.
To verify that everything's working properly, you can open the prettier terminal by clicking on Prettier at the bottom right in your VS Code. Now write some twig content into a .twig file and trigger the formatter. If no errors were reported in the console, and the console informs that the melody plugin is used for formatting; and of course the code has been properly formatted; you're good to go.
There is a built-in way nowadays; when you try to format a document you get forwarded to the extension page and a search for a formatter for a given file format. For Twig:
category:formatters twig
Twig Language 2 seems to be the go-to VS Code Twig extension with the best formatter as of now.
Something related to this, i did it by installing twig in vs code.
Open VS Code and
Ctrl+Shift+X
And get the twig extension and install it. Thanks.
I'm using this yeoman generator (https://github.com/Swiip/generator-gulp-angular) for my project. And have added a couple of bower libraries, namely, videojs, ngDialog.
The problem I'm experiencing is that the css files included in these libraries aren't being packaged up into the vendor.css file like the rest of the packages are. I know that that the generator uses wiredep, but I'm afraid I don't know enough about it to find out what went wrong.
Basically, when I go to view source, I see that there are style includes underneath the vendor.css style include, eg.
<link rel="stylesheet" href="../bower_components/ngDialog/css/ngDialog.css">
Also notice how it is included using "../". This would break if I'm in an HTML file that is in a directory other than the root.
Any pointers?
Thanks.
John.
Basically you don't have to worry about the building process, the gulpfile provided by gulp-angular is well configured for you future including bower components.
Once you run bower install your_component, be sure to run gulp build again in command line, it will then include the needed styles to your index.html.
If you would like to know more about the underlying process with that, you may check yourapp/src/index.html from line 12 to line 20 to get a sense of it. For how wiredep works for your bower components, the official document should suffice.
This is a bit of a weird one:
I've got a gulp task that looks like this:
gulp.task('less', function () {
gulp.src('./less/main.less')
.pipe(sourcemaps.init())
.pipe(less({
plugins: [cleancss]
}))
.pipe(sourcemaps.write()) // will write the source maps to ./public/assets/css-dist/maps
.pipe(gulp.dest(paths.public + 'css/dist'));
});
I'm running this task from inside a play 1.3 project, and it generates the base64-encoded inline sourcemap, as expected, but when I load it up in chrome, all of the styles are mapping to line 1 of main.css, indicating that something is wrong.
Now, here's where it gets weird: if I run this same task, pointing at copies of the same files, in another project with an identical directory structure, just running under plain-ol' apache, it works exactly as expected. The output files appear exactly the same.
Does anyone have any insight as to why this would be?
FWIW, an extremely similar scenario plays out when minifying and concatenating my js, using gulp-uglify and gulp-concat
Try see if you can visualize the difference/mappings via this visualizer tool. If both compiled files are exactly the same between the two projects then it's likely due to the different ways you are serving/accessing the files? With the 2nd project did you also try to view the sourcemap via Chrome?
Just to clarify, not only are you writing an inline sourcemap, you're also embedding your sources so everything is within the compiled .css file, the external original source files are not the referenced source(sourceRoot will be /source/).
Is there a simple HTML preprocessor available to use for existing HTML code, that I won't need to modify my existing html to conform with preprocessors syntax?
I'm developing a mobile app with a few pages built with html, however i've started having the problem of having to update each page for when making changes to similiar content (header, footer etc) I don't want to duplicate content and have mismatches, rather i'd like to use a preprocessor that has an include method (something like how php does it), so that I can include these similiar contents.
I've looked at stuff like HAML & Jade, but it seems they have a strict syntax you need to follow with indents and the sort or editing html to include pipes on each line, else things wont compile.
Like I said I have existing html I would just like to cut & paste my HTML into different files, include them and stick with that workflow as I think it's the simplest.
But if anyone has any other ideas how I can tackle my situation that is welcomed too.
I guess since your requirement is to only include files that you don't need a full blown template system . You could take a look at gulp-include which is a gulp plugin to include files. Using gulp has the advantage that gulp comes with a watch feature to watch the file system for changes - whenever a change is detected a task can be triggered.
An example how your gulpfile.js could look like
var gulp = require('gulp');
var include = require('gulp-include');
gulp.task('template', function() {
return gulp
.src('*.html')
.pipe(include())
.pipe(gulp.dest('dist'))
});
gulp.task('dev', function() {
gulp.watch('*.html', ['template']);
});
gulp.task('default', ['template']);
This gulpfile registers a 'template' task that takes all html files and processes the file's contents with the gulp-include plugin. The template task is registed as default gulp task. So if you invoke gulp without any command line args then the template task is run. The gulp 'dev' task allows you to run gulp dev from the command line that watches all html files for changes and triggers the template task whenever a html file changes.
The gulp include plugin scans your html files for something like
= include relative/path/to/file.html
and includes 'file.html' contents.
The include syntax is quite well documented on the gulp-include web site.