Front-end development artifact Webstorm--grunt build Environment (03)

Through the previous front-end development artifact webstorm--Automation Workflow (preface), I believe everyone grunt automation tools have a preliminary understanding. Next I'll use the WROC3000 Web as a prototype to demonstrate how to work with the grunt tool Increase Productivity， compress code to the maximum extent。

1. First install the node environment into the official website to download the installation. (Remember installation directory) Detect installation Success method: Open cmd window, enter

Node--version

The installed version number is printed, indicating that the installation was successful. 2. Install the Grunt client in the cmd window, switch to the node installation letter and automatically switch to the Nodejs installation directory. Input  npm install -g grunt-cli  回车 安装成功后会显示安装路径以及版本号。


For example

Your environment have been set up for using node. js 0.10.28 (x64) and NPM. C:\Users\ Peja Green >d:d:\program files\nodejs>npm install-g grunt-clinpm http GET https://registry.npmjs.org/ GRUNT-CLINPM http https://registry.npmjs.org/grunt-clinpm http GET https://registry.npmjs.org/noptnpm http GET HTTPS://REGISTRY.NPMJS.ORG/FINDUP-SYNCNPM http GET https://registry.npmjs.org/resolvenpm http 304 https:// REGISTRY.NPMJS.ORG/NOPTNPM http 304 https://registry.npmjs.org/findup-syncnpm http https://registry.npmjs.org/ RESOLVENPM http GET https://registry.npmjs.org/abbrevnpm http GET https://registry.npmjs.org/globnpm http GET https:// REGISTRY.NPMJS.ORG/LODASHNPM http 304 https://registry.npmjs.org/abbrevnpm http https://registry.npmjs.org/ GLOBNPM http https://registry.npmjs.org/lodashnpm http GET https://registry.npmjs.org/inheritsnpm http GET https:// REGISTRY.NPMJS.ORG/MINIMATCHNPM HTTP 304 https://registry.npmjs.org/minimatchnpm http 304 https://registry.npmjs.org /INHERITSNPM http GET https://registry.npmjs.org/sigmundnpm http GET https://registry.npmjs.org/lru-cachenpm http 304 https:// REGISTRY.NPMJS.ORG/SIGMUNDNPM http 304 https://registry.npmjs.org/lru-cachec:\users\ Peja Blue \appdata\roaming\npm\grunt- > C:\Users\ \appdata\roaming\npm\node_modules\grunt-cli\bin\grunt[email protected] C:\Users\ Pei Qing \appdata\ Roaming\npm\node_modules\grunt-cli├──[email protected]├──[email protected] ([email protected]) └──[email protected] ([email protected], [email protected]) D:\Program files\nodejs>

3. Configure the Webstorm grunt environment to create a new empty project (take Ws-grunt as an example), create a new Gruntfile.js file in the root directory, select the file right-click, select, open the Grunt console. （Note: The name of the JS file must be gruntfile, otherwise right-click does not appear)Operation Process:

All see the last Grunt console has an error message (error) because the Grunt service is not installed. Here's how to install: Press the SHIFT key two times, and you'll see a new pop-up window (search EveryWhere) that can be searched for any content in your project. Enter node NPM in the Input box, select node. js and NPM under Actions, select in the New popup window, enter grunt, and click Install package for installation. After successful installation, there will be a green message bar hint. Closes the current window. Click OK again. At this point, the Node_modules folder is generated under the root directory. When you refresh the grunt console, the error message disappears.

4. Configure the Webstorm support grunt syntax hint configuration process as follows:

At this point, the configuration environment in Webstorm has been built.