Build a front-end automation development environment

One: NPM

One: NPM (Node Package manager)

NPM is node's package management tool, which mainly installs, updates, uninstalls, views, searches, launches, etc. of node packages.

II: NPM Installation

There are two kinds of installation, a local installation, the package download to the current directory, only the current directory can use NPM install GRUNT-CLI

Another global installation, the package is downloaded to the system-specified directory, and can be used in all directories using NPM install-g GRUNT-CLI

　　　　　　　　After the installation is successful, an extra Node_modules directory will be created, and GRUNT-CLI will be installed in this directory

If the project relies on a lot of package, it can be declared in Package.json and then done with NPM install

Three NPM Uninstall

NPM Unistall GRUNT-CLI

Four to see where the package is installed

NPM ls

View Global NPM Ls-g

View the specified package NPM ls grunt-cli, more details NPM info grunt-cli

Five Updates

NPM Update Grunt-cli

Six Search

NPM Search Grunt-cli

Seven release and NPM configuration, not tested yourself

Two: Package.json

If we rely on a lot of packages, every time NPM install XX is very troublesome, can be declared directly in the Package.json,

Package.json contains all the meta-data related to the project and is a dependency on NPM information, identifying projects, and handling changes. The project description, version, author, etc. are also included. (All configurations in the document must be JSON, not JS objects)

Package.json field: (Cannot install if no Name version is available)

{

"Name": "(must) package name (cannot appear".) 、_”）",

"Version": "(mandatory) package version, can start with ' V ',

"description": "description",

"Author": "Author",

"Dependencies": "Package depends on the module, others want to use the package, what to install, the dependent module will be installed into the Node_modules directory",

"Devdependencies": "The development module of the package, which is the development of others on this package",

"License": "ISC Project License Agreement",

"Main": "Relative to the file path of the root directory, configure a file to point to the module's entry program"

}

There are also some configurations that can be viewed in http://www.mujiang.info/translation/npmjs/files/package.json.html

　　Setup is set up, NPM install depends on installation, (I have set the gulp installed in the package)

Three Gulp

Gulp is the front-end code to automate the building of tools, can optimize the site resources, can automatically complete the JS sass less HTML image CSS, such as testing, inspection, merging, compression, formatting, browser automatic refresh, deployment file generation, monitoring files after the changes to repeat the steps.

　　Gulp doesn't do anything by itself, we can write tasks, gulp to perform tasks.

New Gulpfile.js to test whether the gulp is normal

var gulp = require (' Gulp '); Gulp.task (function() {  });

, indicating success.

To compile a less example:

The structure of my project document is like this

：

Gulpfile.js all the tasks are defined in this area:

Require load module, import Toolkit (node_modules corresponding module)
var gulp = require (' Gulp '),       = require (' gulp-less ');//define a testless task Gulp.task (  function  () {    gulp.src (' less/*.less ')//task-oriented file, matching all less files, creating a Stream object, passed to the less () function        . Pipe (less ())//Call module for the task, less () The data is modified to return a stream object, passed to Gulp.dest ()        . Pipe (Gulp.dest (' dist ')); Generate files or folders for incoming data, non-existent folders will be created    under Dist file to generate CSS}); Gulp.task (' Default ', [' testless ']);  Defining default Tasks

Gulp does not provide a task name, the default task will be executed, we put the testless task before default execution, all execution $gulp, will compile less file

pipe-Pass data to the plugin to

Gulp.task (NAME,[DEPS],FN) defines tasks, name task names, deps dependent task names, FN callback functions

GULP.SRC (globs) task-handling file Globs: A string of file paths processed or an array of strings

Path to file generation after Gulp.dest (path) finishes processing

File monitoring, gulp can monitor one or a group of files when a file changes to trigger a task

Gulp.watch (first parameter: matches the file to be monitored, the second parameter is an array (the task queue executed when the file changes) or a callback function)

　　

　　Gulp Common Plug-ins : http://www.cnblogs.com/kelsen/p/4643762.html　

The whole will follow this tutorial go again, gogo start ... Http://www.cnblogs.com/kelsen/p/4993169.html

Reference: http://www.cnblogs.com/chyingp/p/npm.html

Http://www.cnblogs.com/kelsen/p/4608119.html

Http://www.mujiang.info/translation/npmjs/files/package.json.html

Http://www.ydcss.com/archives/18

Http://www.cnblogs.com/kelsen/p/4643762.html

Build a front-end automation development environment