node安装

  • node简介
    • 下载安装
    • 插件管理工具npm
      • npm是什么
      • 安装cnpm插件
    • gulp代码构建的工具
      • 是什么
      • 全局安装
      • 项目使用
    • 项目构建
      • 创建packagejson配置文件
      • 本地安装gulp项目管理打包插件
      • 常用gulp插件
        • gulp-concat文件合并插件
        • gulp-uglify压缩js插件

node简介

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。
Node.js 的包管理器 npm,是全球最大的开源库生态系统。

简单来说:Node 是一个 服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念。它的目标是帮助程序员构建高度可伸缩的应用程序,编写能够处理数万条同时连接到一个(只有一个)物理机的连接代码。

下载安装

下载地址点击进入

安装测试:

  1. 打开命令提示行工具
    window+R打开运行
    cmd进入

    • 查看nodejs版本:(出现版本号即为安装成功)
      node -v
    • nodejs集成的nodejs包管理器——查看版本
      npm -v

插件管理工具npm

npm是什么?

  1. npm是nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等);
    因为npm是外国服务器下载,受网络影响大。淘宝团队把内容打包放在了国内的服务器。npm 等于 cnpm
    官方网址:http://npm.taobao.org;

  2. 有那些模块?一般的用法:

    • ——安装插件:
      cnpm install [-g] [–save-dev]
      {插件名称,[-g]全局安装&装c盘写入系统环境变量,[–save]配置在package.json&是nodejs项目的配置文件,[-dev]保存至devDependencies节点}

    • ——使用cnpm卸载插件:
      cnpm uninstall [-g] [–save-dev]
      ·删除全部插件:
      借助rimraf插件:cnpm install rimraf -g
      rimraf node_modules

    • ——使用npm更新插件:
      cnpm updata [-g] [–save-dev]
      ·更新全部插件: cnpm update [–save-dev]

    • ——查看npm帮助: cnpm help

    • ——当前目录已安装插件: cnpm list

安装cnpm插件

  • 命令提示符执行下列命令:
npm install cnpm -g --registry=https://registry.npm.taobao.org
  • 查看安装版本
cnpm -v

gulp代码构建的工具

是什么?

对代码进行构建的工具,全局安装gulp目的是为了通过他执行gulp任务;
基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。

全局安装

cnpm install gulp -g
——查看版本: gulp -v

项目使用

全局gulp为了执行gulp任务;本地gulp为了调用gulp插件功能
- 局部安装

    cnpm install gulp --save-dev

项目构建

1.创建package.json配置文件

  • 是什么?
    package.json是基于nodejs项目必不可少的配置文件,它是存放在项目根目录的普通json文件;

  • 创建方式(手动 | 命令行)——注意:json文件内是不能写注释的

cnpm init

本地安装gulp项目管理打包插件

  • 是什么?
    前端开发过程中对代码进行构建的工具
    &全局gulp为了执行gulp任务;本地gulp为了调用gulp插件功能

  • 安装gulp:
    全局安装: cnpm install gulp -g
    定位项目根目录 执行 cnpm install gulp –save-dev

  • 创建gulpfile.js文件(重要)

    • 是什么?
      gulpfile.js是gulp项目的配置文件,是位于项目根目录的普通js文件(其实将gulpfile.js放入其他文件夹下亦可)

    • 引用gulp

    var gulp = require('gulp');     //引入gulp模块
    gulp.task('任务名',function(){     //建立一个任务
        //任务代码
     });    

常用gulp插件

gulp-concat文件合并插件

合并文件插件——挂靠在gulp上,局部安装

install gulp-concat --save-dev

使用方法:

var gulp = require('gulp');             //加载模块
var concat = require('gulp-concat');
gulp.task('concat',function(){          //新建一个任务,参数 名称.函数
    return gulp.src('./要合并的文件*.js').pipe(concat()).pipe(gulp.dest('./输出url.js'));       
    //pipe()管道操作符,交给concat()合并处理gulp.dest()输出出来;
});

// 执行
    gulp concat

gulp-uglify压缩js插件

安装gulp-uglify

cnpm install gulp-uglify --save-dev

压缩js文件

var gulp = require('gulp');             //加载模块
var uglify = require('gulp-uglify');
gulp.task('uglify',function(){          //新建一个任务 参数:名称,执行函数
    return gulp.src('./要压缩的文件.js').pipe(uglify()).pipe(gulp.dest('./输出文件'))
})

// node中运行
    gulp uglify

你可能感兴趣的:(前端开发)