Front-end automated Grunt tutorial and automated Grunt tutorial

Source: Internet
Author: User
Tags install node

Front-end automated Grunt tutorial and automated Grunt tutorial

After learning about Bootstrap recently, I found that Bootstrap uses LESS. Well, I started to learn LESS and LESS about it. I found that the automatic compilation tool Grunt and the Grunt process found that node is required. js npm tools and syntax ...... Come on, stop it, install node first, and then learn about it. As this diaosi uses the win7 system, the following tutorials are all tested in win7.

1. Preparation: Install node. js: http://www.w3cschool.cc/nodejs/nodejs-install-setup.html

The new version of nodejs comes with npm management tools, which can be viewed by running the npm-version command.


If you have installed node before, you can use the command to update npm to the latest version: npm install npm @ latest

2. install Grunt-CLI: npm install-g grunt-cli with the g identifier to implant the grunt command into the system path, so that you can run the grunt command in any file directory. You can use grunt-version to check whether the installation is successful.
3. grunt test: 3.1 create a project file, create two folders src and dest under the project, and save the files manually written by src, such as menu. js and slide. js. The dest file stores the running result of grunt.

3.2 Create a package. json file under the project file: The file content is as follows:

Save the file and go to the project file. Run npm install to download the grunt tool. The first three warnings are due to the fact that the description attribute and repository object are not added to our json file, as well as the README introduction. You can add it on your own.
......

After completion, we will find that there are multiple node_modules folders under our project file, and what is saved in it is the plug-in we just defined in package. json to be loaded. 3.3 create a Gruntfile. js File
Module. exports = function (grunt) {// configure grunt. initConfig ({pkg: grunt. file. readJSON ('package. json'), // usage of the concat plug-in concat: {bar: {src: ['src/menu. js', 'src/slide. js'], dest: 'dest/main. js '}}, // usage of the uplify plug-in uglify: {options: {banner:'/* <% = pkg. name %> <% = grunt. template. today ("yyyy-mm-dd") %> */\ n'}, build: {src: 'dest/main. js', dest: 'dest/main. min. js '}}); // load the concat and uglify plug-ins for merge and compression grunt respectively. loadNpmTasks ('grunt-contrib-concat'); grunt. loadNpmTasks ('grunt-contrib-uglify '); // register the task grunt. registerTask ('default', ['concat', 'uglify ']);};
3.4 run the grunt command
3.5 The dest directory contains the main. js and main. min. js files. This is a big success.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.