![]() They need to correspond to the tasks we defined in the gulpfile.js file. This code instructs VS Code to use Gulp as the main task runner and inside there we declare the 3 tasks we wish to make available to the IDE. Delete everything from the file and add the following code: This will present you with the tasks.json file. Press on **Configure Task Runner" option. While in VS Code, press Ctrl+Shift+B to define a new task runner. watch - monitors the *.scss & *.ts files for any changes and automatically executes the corresponding task.sass - compiles the *.scss files to *css and puts the generated file in the designated location ( css).scripts - compiles the *.ts files to js, merges all code into one file, generated the typings (.d.ts) file and saves the generated files to the designated location ( release).At the top of the file we define gulp we import all the plugins. I will try to explain briefly what's happening within this file. At the root of your project, create a gulpfile.js file. Time to glue everything together and get a working site. Again, use the code below or add your own code to the appropriate files Add the Gulp tasks Add a main.scss file for the CSS code and an index.html file for the main website page. Add animal.ts and human.ts files and paste the appropriate code. Let's add a couple of TypeScript files, a Sass file and an HTML file to make a crude, yet basic website. These plugins will be called from gulp to perform our tasks. These commands will install the necessary plugins and a number of dependencies. Then execute the following commands, one at a time: npm install gulp-sass -save-dev To install the plugins, go back to the node.js command prompt and navigate to the root of your project. For the purpose of this post, we need 3 plugins: We need plugins to help us perform the necessary tasks. Gulp is a task runner so on its own it's pretty useless. At the last step, just type yes to generate the file. None of the settings is particularly important so you could either leave all of them blank or copy my settings. The command prompt will take you through a set of questions (CLI Wizard) in order to generate the configuration settings. This file is used by node.js to keep track of the installed packages. This task will create a package.json file at the root of your project. ![]() ![]() To do so, open the Node.js command prompt, navigate to the root of your project and execute the following command: npm init Next, we need to initialize npm on the current project. All subsequent packages will be installed at the local level through. I generally tend to avoid global installs but for VSCode will not run Gulp if only installed locally. Open the Node.jS Command Prompt and type npm install -global gulp. With this out of the way, you can now install Gulp. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |