关于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代码

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，第二个参数时运行函数。

秒客网

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

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

相关文章