Grunt initial experience

Recently, grunt was used to build projects, including File compression and merge operations, during the development of multi-person teams. I have learned a lot about configuring grunt tasks. Now you can record your learning process as follows:

1. For a project, the grunt build tool mainly relies on two files gruntfile. JS/gruntfile. coffee and package. JSON. The first file details the task information to be executed by grunt, and the second file is the file required by each node project, which stores the environment information about the project;

2. gruntfile. in the initial stage of the project, I configured only two tasks: browserify and uglify. The former is used to allow front-end personnel to develop node programs on the server, A modular Development Project, to put it bluntly, is that the task can identify the languages in some columns of node in the program such as require, and then organize the code, this allows the front-end to directly reference the file on the page to process some logic. The latter is used to compress the file, which greatly improves the page loading performance;

3. Package. the configuration of the JSON file is mainly used to configure the details of the current project, as well as the dependency modules for running the project and the development modules used during development, after installing the development module using NPM install, you can perform local free development.

The following describes the directory structure of my project:

A. The main directory contains two folders: Build and JS, and two JS files: gruntfile. js and package. JSON;

B. Use grunt to build a project, automatically compile the files under js to the build directory, and compress the files.

Let's take a look at the configuration of the gruntfile. js file:

Module. exports = function (grunt) {grunt. initconfig ({PKG: grunt. file. readjson ("package. JSON "), build_root:" build ", js_root:" JS ", browserify: {compile: {expand: True, CWD:" JS ", // SRC :["*. JS "], // source file suffix DEST:" build/JS ", // directory where the build file is located Ext :". JS "// Build File Extension }}, uglify: {options: {sourcemap: true}, compile: {expand: True, CWD:" JS ", Src: ["*. JS "], DEST:" build/JS ", ext :". min. JS "}}, watch: {options: {livereload: true}, JS: {files: ['js /*. js'], tasks: ['browserify: Compile ', 'uglify: Compile'] }}); grunt. loadnpmtasks ("Grunt-contrib-watch"); grunt. loadnpmtasks ("Grunt-contrib-uglify"); grunt. loadnpmtasks ("Grunt-browserify"); grunt. registertask ("default", ['browserify ', 'uglify']);};

In the above grunt configuration file, I mainly configured two tasks: browserify and uglify, and loaded the module task through loadnpmtasks. After registering the default task, when running grunt, the browserify and uglify tasks are automatically run to execute corresponding operations. Note that these two tasks are executed in sequence, that is, compiled and compressed.

You may have noticed that I have configured an additional watch task to monitor file changes in the configuration file, automatically execute the preceding two tasks and re-build the file.

The configuration information in the package. JSON file is as follows:

{"name":"practice","version":"0.0.1","devDependencies":{"grunt":"~0.4.1","grunt-browserify": "~1.3.2",            "grunt-contrib-copy": "~0.5.0",            "grunt-contrib-watch": "~0.5.1",            "grunt-contrib-uglify": "~0.4.0"}}

Example:

1. Use git Bash to go to the project directory, demonstrate how to use the cnblog-test directory under the e disk, go to the cnblog-test \ JS directory, and use the following command to create two files

Touch parent. js

Touch child. js

2. Use VI to open the above two files and enter the following code:

// Parent. JS file content module. exports = function () {console. log ("I am parent") ;}; // var parent = require (". /parent "); parent (); console. log ("I am child ");

 

3. Run grunt to view the files that have been built under the build directory. The content of the child. js file is as follows:

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module ‘"+o+"‘")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){var parent=require("./parent");parent();console.log("i am child");},{"./parent":2}],2:[function(require,module,exports){module.exports=function(){    console.log("i am parent");};},{}]},{},[1])

This file can be directly executed as a reference file on the page.

The running result is as follows:

I am parent

I am child

If it is introduced as a page file, you can see the same effect in the console.

There are many shortcomings in the study journey. I hope you can give me more advice! By ygh1224