unt8_咕unt教程

unt8

This is a quick introduction to working with Grunt.

这是与Grunt合作的快速入门。

What is Grunt?

什么是咕unt声？

Grunt is a tool that is used to automate certain tasks for a developer, such as CSS file concatenation, minimizing images and unit testing. These tasks have traditionally been handled by developers in order to ensure a website's or application’s performance. With tools like Grunt we can automate these processes and focus on more important tasks when building software.

Grunt是一种工具，用于自动完成开发人员的某些任务，例如CSS文件串联，最小化图像和单元测试。 这些任务通常由开发人员处理，以确保网站或应用程序的性能。 使用Grunt之类的工具，我们可以自动化这些过程，并在构建软件时专注于更重要的任务。

Prerequisite:

先决条件：

You will need a basic knowledge of JavaScript. You will also need to be familiar with your operating system’s command prompt. Understanding of how to navigate file structure and perform basic tasks is important to using Grunt.

您将需要JavaScript的基础知识。 您还需要熟悉操作系统的命令提示符 。 了解如何导航文件结构和执行基本任务对于使用Grunt非常重要。

How to get started?

如何开始？

1. In order to get started with your own handy-dandy automation tool, go to http://nodejs.org/ and download the latest version of Nodejs.
   为了开始使用您自己的便捷自动工具，请访问http://nodejs.org/并下载最新版本的Nodejs。
2. Once Node has finished installing on your machine, open your computer's 'command prompt' and type in 'npm install –g grunt-cli'. This command tells Node Package Manager (npm) to globally install (-g) Grunt's (grunt) Command Line Interface (-cli). This is basically a fancy way of telling your machine that we would like to start using Grunt.
   Node在计算机上完成安装后，打开计算机的“命令提示符”，然后键入“ npm install –g grunt-cli”。 此命令告诉节点程序包管理器（npm）全局安装（-g）Grunt的（grunt）命令行界面（-cli）。 基本上，这是一种告诉您的机器我们想开始使用Grunt的理想方式。
3. After you’ve installed the Grunt CLI globally, go to http://gruntjs.com/plugins and choose a plugin that you would like to use inside of a project. For this tutorial I will be using the plugin "uglify" at https://www.npmjs.org/package/grunt-contrib-uglify.This plugin is used to minimize JavaScript files that are ready for production.
   
   1. Once you’ve chosen the plugin you want to use, create a new JavaScript file and name it ‘gruntfile.js’.
   2. Within your command prompt, navigate to where you created your gruntfile. In my example I created my gruntfile within C:\xampp\htdocs\baysite\js.
   3. ‘gruntfile.js’ is used to tell Grunt what we want it to perform. In this case, we are going to tell Grunt to read our ‘package.json’ file, minimize the JavaScript files that we specify and place the minimized versions within a destination folder of our choosing.
   在全球范围内安装Grunt CLI后，请访问http://gruntjs.com/plugins 并选择一个您想在项目内部使用的插件。 对于本教程，我将在https://www.npmjs.org/pack使用插件“ uglify” 年龄/咕-声 贡献 lify 。此插件用于最小化准备生产JavaScript文件。
   
   1. 选择了要使用的插件后，创建一个新JavaScript文件并将其命名为“ gruntfile.js”。
   2. 在命令提示符下，导航到创建gruntfile的位置。 在我的示例中，我在C：\ xampp \ htdocs \ baysite \ js中创建了gruntfile 。
   3. “ gruntfile.js”用于告诉Grunt我们想要它执行什么。 在这种情况下，我们将告诉Grunt读取“ package.json”文件，最小化我们指定JavaScript文件，并将最小化的版本放在我们选择的目标文件夹中。
4. Write your code in ‘gruntfile.js’ that you want to be executed. For this tutorial I will be using this snippet:
   

   ============

   module.exports = function(grunt) {

     // Project configuration.

     grunt.initConfig({

         // Tell Grunt about our package.json file.

       pkg: grunt.file.readJSON('package.json'),

         //create our uglify task

       uglify: {

         my_target: {

         // Tell uglify about our Javascript files that we want to minimize.

           files: {

             'main.min.js': []'js/main.js']

           }

         }

       }

     });

   
   

     // Load the plugin that provides the "uglify" task.

     grunt.loadNpmTasks('grunt-contrib-uglify');

   
   

     // Default task(s). This is the task(s) that is run when grunt is run in the command prompt.

     // Use if you don't want to specify a specific task.

     grunt.registerTask('default', []'uglify']);

   
   

   };

   
   

   ============

   
   

   ============

   module.exports = function（grunt）{

   //项目配置。

   grunt.initConfig（{

   //向Grunt讲述我们的package.json文件。

   pkg：grunt.file.readJSON（'packa ge.json'），

   //创建我们的uglify任务

   uglify：{

   my_target：{

   //向uglify告知我们要最小化的Javascript文件。

   文件：{

   'main.min.js'：[]'js / main.js']

   }

   }

   }

   }）;

   
   

   //加载提供“ uglify”任务的插件。

   grunt.loadNpmTasks（'grun t-贡献 丑化'）;

   
   

   //默认任务。 这是在命令提示符下运行grunt时运行的任务。

   //如果您不想指定特定任务，请使用。

   grunt.registerTask（'defa ult'，[]'uglify']）;

   
   

   };

   
   

   ============

5. Reopen your command prompt and type in ‘grunt uglify’, or simply ‘grunt’. We don’t need to specify a task for Grunt because we registered our default task to ‘uglify’. After this task is complete, Grunt should read your ‘main.js’ file and minimize it.
   重新打开命令提示符，然后输入“ grunt uglify”，或直接输入“ grunt”。 我们不需要为Grunt指定任务，因为我们将默认任务注册为“ uglify”。 完成此任务后，Grunt应该读取您的“ main.js”文件并将其最小化。

翻译自: https://www.experts-exchange.com/articles/17451/Grunt-Tutorial.html

unt8