Front-end Project preparation Nodejs+gulp+bower

1, installation Nodejs

Nodejs official website Download installation files

After the installation is complete, the command window executes,(show Nodejs version) and (show NPM version) You can use these two commands to see if the installation was successful:

Node-v

Npm-v

2.NPM Introduction

Nodejs installation is automatically installed NPM,NPM is a NODEJS package management tool that is used to download packages from the Web and to install and manage the dependencies of the project on the package, similar to maven on the Java platform.

Package refers to the implementation of certain functions, and can run on the Nodejs platform, generally open source programs, such as compression JS code program, check the correctness of the JS Code program and so on.

Using NPM to manage projects, there will be a JSON format file named Package.json in the general Engineering directory that defines the name of the project, the author, the warehouse address, the development-dependent module, the use version of the project, and so on, as in the following bootstrap Package.json : (Detailed configuration instructions see: http://blog.csdn.net/woxueliuyun/article/details/39294375)

{"Name": "Bootstrap",//Project Name "description": "The most popular front-end framework for developing responsive, mobile firs T projects on the web. ",//Project description" version ":" 3.3.0 ",//Project version" keywords ": [///keyword for others search find" css "," less "," Mobile-fi RST "," responsive "," front-end "," Framework "," web "]," homepage ":" http://getbootstrap.com ",//Project home Address" Auth or ":" Twitter, Inc.,//author "scripts": {//Definition script, key for script name value for executable nodejs command "test": "Grunt Test"}, "style": "dist/css/    Bootstrap.css "," less ":" Less/bootstrap.less "," main ":"./dist/js/npm "," repository ": {//defines the warehouse type and address" type ":" Git ", "url": "Https://github.com/twbs/bootstrap.git"}, "Bugs": {//Submit bug Address "url": "Https://github.com/twbs/bootstrap/issu Es "}," license ": {//copyright notice" type ":" MIT "," url ":" Https://github.com/twbs/bootstrap/blob/master/LICENSE "}," Devd Ependencies ": {//development depends on which Nodejs module" Btoa ":" ~1.1.2 "," Glob ":" ~4.0.6 "," Grunt ":" ~0.4.5 "," Grunt-autoprefixer ":" ~1.0.1 "," Grunt-banneR ":" ~0.2.3 "," Grunt-contrib-clean ":" ~0.6.0 "," Grunt-contrib-concat ":" ~0.5.0 "," Grunt-contrib-connect ":" ~0.8.0 "," grunt-contrib-copy ":" ~0.7.0 "," Grunt-contrib-csslint ":" ~0.3.1 "," Grunt-contrib-cssmin ":" ~0.10.0 "," Grun T-contrib-jade ":" ~0.13.0 "," Grunt-contrib-jshint ":" ~0.10.0 "," grunt-contrib-less ":" ~0.12.0 "," Grunt-contrib-qu    NIT ":" ~0.5.2 "," grunt-contrib-uglify ":" ~0.6.0 "," Grunt-contrib-watch ":" ~0.6.1 "," Grunt-csscomb ":" ~3.0.0 ",    "Grunt-exec": "~0.4.6", "grunt-html-validation": "~0.1.18", "Grunt-jekyll": "~0.4.2", "Grunt-jscs": "~0.8.1",    "Grunt-saucelabs": "~8.3.2", "grunt-sed": "~0.1.1", "Load-grunt-tasks": "~1.0.0", "Npm-shrinkwrap": "~4.0.0", "Remarkable": "^1.2.2", "Time-grunt": "~1.0.0"}, "engines": {//nodej engine Version "node": "~0.10.1"}}

If you need to develop bootstrap, you can download all of the dependencies to the current directory node_modules in the directory where the Package.json resides, so you do not need to have a dependency package in the source code. Just need to have a package.json to get it done.

If a dependent package is required for a new project, the command: NPM install--save-dev package name, the program is installed in the Node_modules directory of the current directory, and relies on the Devdependencies attribute added to the Package.json file.

The Nodejs installer adds two variables to the environment variable:

System environment variables: path increased C:\Program files\nodejs\ because there are node.exe and npm.cmd in the list, you can call the command globally after you join the path.

Settings in User variables:

path=c:\users\administrator\appdata\roaming\npm

The directory under the Node_modules directory is used to store the installed Global Nodejs module and generate the corresponding command-line executable file in the NPM directory. The path is added to the Nodejs module for global invocation.

Use NPM config list to view NPM configuration information:

C:\USERS\ADMINISTRATOR>NPM config list; CLI configsregistry = "https://registry.npmjs.org/" module registered address user-agent = "npm/1.4.28 node/v0.10.33 Win32 x64"; Builtin config undefinedprefix = "C:\\USERS\\ADMINISTRATOR\\APPDATA\\ROAMING\\NPM" Module storage directory; Node bin location = C:\Program Files\nodejs\\node.exe; CWD = C:\Users\Administrator; HOME = C:\Users\Administrator; ' NPM config ls-l ' to show all defaults.

Registry = "https://registry.npmjs.org/" indicates npm insall module, to the module registration address to find, find the module code after the warehouse address, you can download.

You can use NPM Config set <key> <value> to modify the default settings, such as

NPM config Set prefix = ' C:\node ', when changing the prefix, remember to modify the path so that it can be run directly after installation.

If the environment variable is configured with NPM config, a. npmrc file is generated in the C:\Users\Administrator, the configuration information is logged, and modifying the file is equivalent to executing the NPM config command.

3 Installing Git

Git is a distributed version control system, and now open source projects are generally put on the public web git repository, such as GitHub (https://github.com/), the use of the project's dependent packages (open source projects) need to use git from the public repository to download to the local.

Windows platform git:http://msysgit.github.io/, the next step when installing. Default installation address C:\Program files (x86) \git, after installation is complete, add: C:\Program Files (x86) \git\bin in the environment variable path, in order to refer to the Git command in the cmd window.

Go to cmd window: Execute command git--version, display git version number, then install successfully

C:\users\administrator>git--versiongit version 1.9.4.msysgit.2

Git detailed instructions see: http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000

4. Installing Bower

Bower is a package manager for Web applications that specializes in front-end package management.

Bower installation Method: NPM Install-g Bower,-G parameter is the global installation, in which directory to execute this command is OK, Bower is eventually installed to C:\Users\Administrator\AppData\Roaming\npm\ Node_modules\ (by default)

C:\USERS\ADMINISTRATOR>NPM install-g Bowerc:\users\administrator\appdata\roaming\npm\bower, C:\Users\ Administrator\appdata\roaming\npm\node_modules\bower\bin\bower[email protected] C:\Users\Administrator\ appdata\roaming\npm\node_modules\bower├──[email protected]├──[email protected]├──[email  Protected]├──[email protected]├──[email protected]├──[email protected]├──[email protected] ├──[email protected]├──[email protected]├──[email protected]├──[email protected]├──[email  protected]├──[email protected]├──[email protected]├──[email protected]├──[email  Protected]├──[email protected]├──[email protected]├──[email protected]├──[email protected] ├──[email protected] ([email protected]) ├──[email protected] ([email protected]) ├──[email  protected] ([email protected], [email protected], [email protected], [email protected]) ├──[email protected] ([email protected]) ├──[email protected] ([email protected]) ├──[email  protected] ([email protected], [email protected], [email protected]) ├──[email protected ] ([email protected]) ├──[email protected] ([email protected], [email protected], [email  protected], [email protected], [email protected]) ├──[email protected] ([email protected], [ Email protected]) ├──[email protected] ([email protected], [email protected], [email  Protected]) ├──[email protected] ([email protected], [email protected], [email protected]) ├──[ Email protected] ([email protected], [email protected]) ├──[email protected] ([email  protected], [email protected], [email protected], [email protected], [email protected]) ├──[ Email protected] ([email protected]) ├──[email protected]├──[email protected] ([email protected], [email protected], [email protected], [email protected], [email  protected], [email protected], [email protected], [email protected], [email protected], [email  protected]1.0.2, [email protected], [email protected], [email protected], [email  protected], [email protected]) ├──[email protected] ([email protected], [email protected], [ Email protected], [email protected], [email protected], [email protected]) ├──[email  Protected] ([email protected], [email protected], [email protected], [email protected]) ├──[ Email protected] ([email protected], [email protected], [email protected], [email  protected], [email protected], [email protected], [email protected]) ├──[email protected] ([ Email protected], [email protected], [email protected], [email protected], [email  Protected], [email protected], [email protected], [email protected]) 

Open the C:\USERS\ADMINISTRATOR\APPDATA\ROAMING\NPM directory, discover that Bower is installed under the Node_modules directory, and generate executable commands in the NPM directory Bower and Bower.cmd (Do not know how to call it). Therefore, you need to add C:\USERS\ADMINISTRATOR\APPDATA\ROAMING\NPM to the PATH environment variable.

Execute command: Bower--version can display the Bower version:

C:\users\administrator>bower--version1.3.  A

Use Bower can manage the project to the JS class library dependency, if the program relies on jquery, do not need to download jquery.min.js online, use the command bower install jquery--save,jquery Downloaded to the Bower_componets directory in the current directory.

Bower can also manage between JS class library dependencies, if need bootstrap so bower install bootstrap--save, bootstrap download to bower_components directory, At the same time by the bootstrap dependent on the jquery,jquery is also downloaded to the Bower_components directory.

Above command: Bower install bootstrap--save,--save parameter refers to the project's dependency on bootstrap written Bower.json. (Bower.json can be established interactively using Bower init).

Bower.json format:

{  "name": "My-project",//Project name "  version": "1.0.0",//version number  "main": "Path/to/main.css",  "Ignore": [    ". Jshintrc",    "**/*.txt"  ],  "dependencies": {//Project-dependent JavaScript class library    <name>: ' <version> ",    " <name> ":" <folder> ",    " <name> ":" <package> "  },  " Devdependencies ": { Development environment Dependency Package    "<test-framework-name>": "<version>"  }}

With the Bower.json file, you do not need to add the Bower_componets directory to version management. When someone else uses the project, checks it out from the version management system, executes the command bower install in the Bower.json directory, then the dependent JavaScript class library is automatically downloaded and installed into the current directory bower_componets.

Bower Install Bootstrap--save writes bootstrap dependency to Bower.json in dependencies

Bower Install Bootstrap--save-dev writes bootstrap dependency to Bower.json in dependencies and also writes Devdependencies

5. Installing Gulp

Gulp for front-end project construction, such as monitoring program file changes, check JS code correctness, compression JS, source conversion to publish directory, start Web Service test and so on.

Installation method:

To view the Gulp version number:

C:\windows>gulp--version

The gulpfile.js is used to define the tasks performed by Gulp.

6. Building the project directory structure

The directory structure of the project can be arbitrary, there is no fixed structure, since it is reasonable to feel good.

Image: Image Catalog

Scripts: Script Directory

Styles:css Directory

Vender: A dependent third-party Javscript class library or CSS style library (preferably placing a third-party class library in a public HTTP address or referring to a CDN, rather than stocking a third-party class in a local program)

VENDER/CSS: Third-party CSS style Library

VENDER/JS: Third-party JavaScript class library

views:html Template

Index.html: Program Entry

6. Installing dependent libraries Angularjs and bootstrap

First initialize the Bower.json

Execute the command in the project root directory (I am the Web directory):

D:\web>bower init? Name:webtest? Version:0.1.0? Description: Front-end test project? Main file:./app/index.html? What types's modules does this package expose?: Globals? Keywords:? Authors:yanlei <[email protected]>? License:mit? Homepage:? Set currently installed components as dependencies?: Yes? Add commonly ignored files to ignore list?: No? Would you like to mark the package as private which prevents it from being accidentally pub{  name: ' webtest ',  ver Sion: ' 0.1.0 ',  authors: [    ' Yanlei <[email protected]> '  ],  description: ' Front-end Test project ',  main: '. App/index.html ',  moduletype: [    ' Globals '  ],  License: ' MIT ',  private:true}? Looks good?: yesd:\web>

Initialization complete, open Bower.json:

{  "name": "WebTest",  "version": "0.1.0",  "authors": [    "Yanlei <[email protected]>"  ],  "description": "Front-end Test project",  "main": "./app/index.html",  "Moduletype": [    "Globals"  ],  " License ":" MIT ",  " private ": true}

Install Angularjs:

D:\web>bower Install--save angularjsbower angularjs#*               Cached git://github.com/angular/bower-angular.git# 1.3.3bower angularjs#*             Validate 1.3.3 against Git://github.com/angular/bower-angular.gitbower angularjs#*                  New version for Git://github.com/angular/bower-angular.git#*bower angularjs#*              Resolve git://github.com/angular/ Bower-angular.git#*bower angularjs#*             Download Https://github.com/angular/bower-angular/archive/v1.3.4.bower angularjs#*              Extract Archive.tar.gzbower angularjs#*             resolved git://github.com/angular/bower-angular.git# 1.3.4bower angularjs#~1.3.4         Install angularjs#1.3.4angularjs#1.3.4 Bower_components\angularjs

Open Bower.json again:

{  "name": "WebTest",  "version": "0.1.0",  "authors": [    "Yanlei <[email protected]>"  ],  "description": "Front-end Test project",  "main": "./app/index.html",  "Moduletype": [    "Globals"  ],  " License ":" MIT ",  " private ": True,  " dependencies ": {    " Angularjs ":" ~1.3.4 "  }}

Open the Web directory and look at:

Installation bootstrap is also performed.

7. Using Gulp

Execute the GULP command under the project root directory (Web):

1 D:\web>gulp

[11:26:39] Local gulp not found in d:\web[11:26:39] Try running:npm Install Gulp

Hint local does not install gulp, need to install, need to initialize Package.json file between installation:

d:\web>npm initthis utility would walk you through creating a Package.json file. It is covers the most common items, and tries to guess sane defaults. See ' NPM help json ' for definitive documentation on these fieldsand exactly what they do. Use ' npm install <pkg>--save ' afterwards-install a package andsave it as a dependency in the Package.json FILE.P Ress ^c at no time to Quit.name: (Web) webtest//Project name version: (1.0.0)//Project Version Description: Front-end test project//Description Entry point: (Index . js)//Project Entry Test command://test commands git repository://project warehouse address keywords://keyword for others to search author://author License: (ISC)//copyright about  To write to d:\web\package.json:{"name": "WebTest", "Version": "1.0.0", "description": "Front-end Test Project", "main": "Index.js", "Dependencies": {"Gulp": "^3.8.10"}, "Devdependencies": {}, "scripts": {"test": "Echo \" Error:no Test Specif Ied\ "&& exit 1"}, "Author": "", "License": "ISC"}is this OK? (yes) Yes 

The Package.json file is added to the project root directory.

Install Gulp to Local:

D:\WEB>NPM Install gulpnpm WARN package.json [email protected] No repository field.npm WARN Package.json [EMAIL&N Bsp;protected] No README data/> [email protected] Install d:\web\node_modules\gulp\node_modules\v8flags> Node fetch.jsflags for V8 3.14.5.9 cached. [Email protected] node_modules\gulp├──[email protected]├──[email protected]├──[email  Protected]├──[email protected]├──[email protected]├──[email protected]├──[email protected] ([email protected]) ├──[email protected]├──[email protected] ([email protected], [email  protected], [email protected]) ├──[email protected] ([email protected], [email protected], [ Email protected], [email protected]├──[email protected] ([email protected], [email  protected], [email protected], [email protected]) ├──[email protected] ([email protected], [ Email protected], s[email protected], [emAil protected], [email protected]└──[email protected] ([email protected], [email  protected], [email protected], [email protected], T

When you execute the Gulp command, you are prompted:

D:\WEB>GULP[11:32:32] No Gulpfile found

Gulp execution requires gulpfile.js, which defines the tasks that need to be performed. You can manually build one:

Gulpfile.js

var gulp = require (' gulp '); Browsersync = require (' Browser-sync ');        Start the Servergulp.task (' Browser-sync ', function () {Browsersync ({server: {baseDir: "./app") }    });});/ /The Bower library file corresponds to the specified location Gulp.task (' Refbowercomponents ', function () {gulp.src ('./bower_components/angularjs/    Angular.min.js '). Pipe (Gulp.dest ('./app/vender/js '));    Gulp.src ('./bower_components/angularjs/angular.min.js.map '). Pipe (Gulp.dest ('./app/vender/js '));    Gulp.src ('./bower_components/bootstrap/dist/js/bootstrap.min.js '). Pipe (Gulp.dest ('./app/vender/js '));    Gulp.src ('./bower_components/jquery/dist/jquery.min.js '). Pipe (Gulp.dest ('./app/vender/js '));    Gulp.src ('./bower_components/jquery/dist/jquery.min.map '). Pipe (Gulp.dest ('./app/vender/js ')); CSS Gulp.src ('./bower_components/bootstrap/dist/css/bootstrap.min.css '). Pipe (Gulp.dest ('./app/vender/css/')); });//Compile SASS & Auto-inject into Browsersgulp.task (' SASS ', functioN () {return gulp.src ('./app/sass/*.scss '). Pipe (Sass ({includepaths: [' Scss ']}). Pipe (Gulp.dest ('./app/ Styles/style.css '). Pipe (Browsersync.reload ({stream:true});}); /Reload All Browsersgulp.task (' Bs-reload ', function () {browsersync.reload ();}); var files = ['./app/*.html ', './app/images/**/*.* ', './app/views/**/*.html ', './app/scripts/**/*.js ', './A Pp/styles/**/*.css '];//Watch scss and HTML files, doing different things with each.gulp.task (' Default ', [' Browser-sync '    ], function () {Gulp.watch ("scss/*.scss", [' sass ']); Gulp.watch (Files, [' bs-reload ']);});


Turn from: http://www.myexception.cn/javascript/1781968.html (for ease of use, I have slightly modified)

Front-end Project preparation Nodejs+gulp+bower