關於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運行環境。更加深刻，沒法理解事件：一、如何經過nodejs利用JavaScript寫後端語言；二、node的module是什麼；三、關於V8引擎；

　　任何語言只要有引擎就能夠跑起來，這裏至關於搭建了一個靜態服務器，而後在server.js中寫數據的獲取，npm install express。這就是一個簡單的靜態服務器，能夠用於數據處理。http://www.expressjs.com.cn/。

自行理解：

　　一、nodejs是一個相似於底層的開發環境，幫助JavaScript語言讓計算機理解；

　　二、npm是用於管理nodejs的集成安裝包；

　　三、nodejs有不少模塊，例如壓縮文件，搭建靜態服務器等，這些功能須要npm進行安裝。

此文主要內容

　　一、安裝nodejs。

　　二、安裝npm，如今nodejs已經將npm集成了起來。

　　三、安裝cnpm，這是一個淘寶鏡像文件，它的功能和npm同樣，是在國內搭建的一個服務站，更新會比npm慢，可是能夠基本知足開發使用，安裝速度會比npm快。

　　四、搭建gulp自動構建，用於檢測安裝包的自動架構而不是本身再一個個去寫。

　　五、搭建express靜態服務器。

1、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

　　咱們一樣可使用以下來肯定是否安裝成功和版本號。

cnpm --version

2、安裝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開頭，插件名與插件名之間以空格隔開，若是你想要進行一次性安裝的話

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，第二個參數時運行函數。