二十、npm,cnpm,browser-sync,gulp使用简介

npm

• 官网[https://www.npmjs.com]
• node package manager
• 命令:
  • 初始化:npm init
  • 安装指定包:npm install jquery --save
  • 删除指定包:npm remove jquery --save
  • 下载安装package.json中dependencies属性对的文件:npm install --production
  • 

• 1. 说明：npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）
  2. 使用npm安装插件：命令提示符执行npm install [-g] [--save-dev] 
     ：node插件名称。 
     例：npm install gulp-less --save-dev

  -g：全局安装。 
  将会安装在C:\Users\Administrator\AppData\Roaming\npm，并且写入系统环境变量； 非全局安装：将会安装在当前定位目录； 全局安装可以通过命令行在任何地方调用它，本地安装将安装在定位目录的node_modules文件夹下，通过require()调用；

  --save：将保存配置信息至package.json（package.json是nodejs项目配置文件）；

  -dev：保存至package.json的devDependencies节点，不指定-dev将保存至dependencies节点；

  为什么要保存至package.json？因为node插件包相对来说非常庞大，所以不加入版本管理，将配置信息写入package.json并将其加入版本管理，其他开发者对应下载即可（命令提示符执行npm install，则会根据package.json下载所有需要的包）。

  3.使用npm卸载插件：npm uninstall [-g] [--save-dev] 
  PS：不要直接删除本地插件包 
  4.使用npm更新插件：npm update [-g] [--save-dev] 
  5.更新全部插件：npm update [--save-dev] 
  6.查看npm帮助：npm help 
  7.查看当前目录已安装插件：npm list

  PS：npm安装插件过程：从http://registry.npmjs.org下载对应的插件包（该网站服务器位于国外，所以经常下载缓慢或出现异常），解决办法往下看↓↓↓↓↓↓。

  cnpm

  1. 
     
  2. 说明：因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事。来自官网：“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”
  3. 官方网址：http://npm.taobao.org
  4. 安装：命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org
  5. 注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误 
     

  注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm。

  
  

browser-sync

• 更改代码之后自动刷新浏览器
• 需要使用npm进行全局安装:npm install browser-sync -g,-g表示安装到全局
• 使用:browser-sync start --server --files "./index.html,app.css,./css/*.css,*.*"
• --files参数指定要监视的文件，后面跟要监视的文件的文件路径以逗号分隔。

gulp

官网 中文网

• 前端自动化构建工具 js压缩,var x,xname，混淆 合并. css压缩 html压压缩

• grunt ,webpack...

核心就5个方法

• task,gulp中是一个个任务的形式来实现功能。
  • task('任务名',function(){ ..... });
• src
  • src('./*.js')
• dest('./minjs/')// 指定处理后的文件的输出路径.
• watch('./*.js',['任务名1','任务名2']);
• run('任务名');//执行指定的任务.

gulp的安装

• 使用npm 进行安装
• npm install gulp-cli -g;

gulp 使用

使用时还需要在项目中通过npm非全局安装gulp

• npm install gulp --save-dev

还需要在当前项目根目录添加一个gulpfile.js文件来写具体的任务代码.

gulp的一些插件

• 也是使用npm安装
• 对js代码进行压缩 gulp-uglify
• 对代码进行合并 gulp-concat
• 对css进行压缩 gulp-cssnano
• 对html进行压缩 gulp-htmlmin