This recipe describes how to use assemble within Visual Studio and builds upon the browser-sync recipe.
- The primary purpose is to demonstrate using assemble with the Visual Studio IDE
Additionally these topics are also demonstrated in this recipe
- Convert some .less files to a single style sheet (.css file).
- Convert some .hbs files to HTML output, using styles in the generated CSS file.
- Serve the files in the local browser automatically
- Using site metadata
- Using a default layout file
- Load handlebars-helpers
- Using bower packages
- Using a Bootstrap theme in the layout
- Defining a custom helper
- Create some watchers on
- all .less files (
./src/assets/css
folder) - all .js files (
./src/assets/js
folder) - all content files (
./src/pages
and./src/layouts
folders) - all data files (
./src/data
folder)
- all .less files (
- In case any watcher is triggered, update the corresponding files.
This recipe describes how you can leverage assemble within Visual Studio. Included in this template is an example of a simple site that is using some bower packages, a bootstrap example theme and some gulp plug-ins within assemble.
This recipe is not meant to be an example of best practices and it should be used only as reference when starting an assemble project.
To begin the following visual studio extensions must be installed.
By default Visual Studio uses node 0.10.x for its Task Runner Explorer. In order to have the task runner use a newer version of node the options for the External Web Tools must be changed. Specifically the order of the paths in which visual studio looks for web tools must be modified. This article describes the issue and explains the solution in detail.
Customize external web tools in visual studio 2015
By configuring the scripts section the of the package.json in the project the Task Runner Explorer will display these tasks and allow the to be run manually using the context menu. These script definitions are simply examples and the scripts can be defined differently to meet projects requirements.
"scripts": {
"build": "assemble pages",
"rebuild": "assemble rebuild",
"start": "assemble",
"deploy": "assemble publish"
}
Using the context menu in the Task Runner Explorer for the scripts defined in your package.json file you can bind assemble commands to Visual Studio events such as Project Open, Before Build, After Build and Clean. Doing so adds an additional section to the package.json file to hold the event bindings. It looks similar to the following snippet.
"-vs-binding":{"BeforeBuild":["build"]}
Information was used from the following resources in this recipe