关于node.js和npm，cnpm的安装记录以及gulp自动构建工具的使用
工作环境：window下
在一切的最开始，安装node.js (中文站，更新比较慢http://nodejs.cn/)（外文站，最新的资料，但是打开可能比较慢https://nodejs.org/en/download/）
这里是一篇知乎的关于node.js是什么的文https://www.zhihu.com/question/33578075
简单的来说，它是JavaScript运行环境。更加深入，无法理解事件：1、如何通过nodejs利用JavaScript写后端语言；2、node的module是什么；3、关于V8引擎；
任何语言只要有引擎就可以跑起来，这里相当于搭建了一个静态服务器，然后在server.js中写数据的获取，npm install express。这就是一个简单的静态服务器，可以用于数据处理。http://www.expressjs.com.cn/。
自行理解：
1、nodejs是一个类似于底层的开发环境，帮助JavaScript语言让计算机理解；
2、npm是用于管理nodejs的集成安装包；
3、nodejs有很多模块，例如压缩文件，搭建静态服务器等，这些功能需要npm进行安装。
此文主要内容
1、安装nodejs。
2、安装npm，现在nodejs已经将npm集成了起来。
3、安装cnpm，这是一个淘宝镜像文件，它的功能和npm一样，是在国内搭建的一个服务站，更新会比npm慢，但是可以基本满足开发使用，安装速度会比npm快。
4、搭建gulp自动构建，用于检测安装包的自动架构而不是自己再一个个去写。
5、搭建express静态服务器。
一、nodejs和npm的安装
1.进入nodejs的官网，进行下载。注意：如果已经有安装好的版本，不可以直接安装高版本的，它会报错。可以卸载后再安装，也可以利用vnpm来进行升级。
安装完成以后进入cmd中进行确认，它会显示安装的版本号。
node --version npm --version
2.npm和nodejs现在已经集成在了一起安装好了，npm官网https://docs.npmjs.com/，在这里可以看官方文档进行更加详细的学习。
3.安装cnpm
淘宝cnpm镜像https://npm.taobao.org/，-g表示进行全局安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
我们同样可以使用如下来确定是否安装成功和版本号。
|
1
|
cnpm --version |
二、安装gulp，对于主要插件进行测试
gulp中文网http://www.gulpjs.com.cn/docs/getting-started/，gulp插件列表http://gulpjs.com/plugins/
先进行安装
创建一个文件夹，例如gulptest，使用命令行，我们先要进入这个文件夹中，例如cd gulptest
首先进行全局安装
cnpm install gulp -g
接下来在项目文件下面进行项目开发依赖的安装
cnpm install gulp --save-dev
项目文件下面会自动生成一个package.json文件用于记录项目下面的插件安装，这里我们需要查看一下有没有这行代码，一般情况下，我们对于一个项目先要进行初始化，
npm init 这是为了自动生成package.json文件
"devDependencies": {
"glup": "^1.0.14"
},
现在来安装用于压缩html,css,js和img的插件
基本规则：cnpm install [gulp-xxxx] --save-dev，就是将插件安装起来，gulp下的插件命名都以gulp开头，插件名与插件名之间以空格隔开，如果你想要进行一次性安装的话
|
1
|
npm install gulp-htmlmin gulp-imagemin imagemin-pngcrush gulp-minify-css gulp-jshint gulp-uglify gulp-concat gulp-rename gulp-notify --save-dev |
安装完成以后我们依旧可以进入项目根目录上的package.json文件中查看是否安装完成
安装完成以后要开始编写运行文件了
在根目录下面创建一个js文件，gulpfile.js文件，基础代码是
var gulp = require('gulp');
gulp.task('default', function() {
// 将你的默认的任务代码放在这
});
在根目录文件下命令行直接输入gulp就会默认运行这个文件中defalut代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
var gulp = require('gulp') htmlmin = require('gulp-htmlmin') imagemin = require('gulp-imagemin') minifycss = require('gulp-minify-css') uglify = require('gulp-uglify');//压缩htmlgulp.task('htmlmin',function(){ //可以不在同一个目录下面 gulp.src('./views/**/*.html') .pipe(htmlmin({ removeComments:true })) .pipe(gulp.dest('./dist/views'));});//压缩jsgulp.task('uglify',function(){ gulp.src('./static/js/**/*.js') .pipe(uglify()) .pipe(gulp.dest('./dist/static/js'));});//压缩cssgulp.task('minifycss',function(){ gulp.src('./static/css/**/*.css') .pipe(minifycss()) .pipe(gulp.dest('./dist/static/css'));});//压缩图片gulp.task('imagemin',function(){ gulp.src('./static/images/**/*.{png,jpg,gif,ico}') .pipe(imagemin()) .pipe(gulp.dest('./dist/static/images'));});//动态监听gulp.task('watch',function(){ gulp.src('./views/**/*.html',['htmlmin']); gulp.src('./static/js/**/*.js',['uglify']); gulp.src('./static/css/**/*.html',['minifycss']); gulp.src('./static/images/**/*.{png,jpg,gif,ico}',['imagemin']);})//合并运行任务gulp.task('default',['htmlmin','uglify','minifycss','imagemin','watch']); |
gulp.task('taskname',fuc);第一个参数时对任务进行命名，这个是可以随便命名的，在合并任务里面进行任务运行的时候添加的是对应的taskname，第二个参数时运行函数。
