关于node.js和npm，cnpm的安装记录以及gulp自动构建工具的使用

关于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');   //压缩html gulp.task('htmlmin',function(){     //可以不在同一个目录下面     gulp.src('./views/**/*.html')         .pipe(htmlmin({             removeComments:true         }))         .pipe(gulp.dest('./dist/views')); });   //压缩js gulp.task('uglify',function(){     gulp.src('./static/js/**/*.js')         .pipe(uglify())         .pipe(gulp.dest('./dist/static/js')); });   //压缩css gulp.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，第二个参数时运行函数。