node.js

nvm：用来管理 node 版本的工具。

下载 nvm：https://github.com/coreybutler/nvm-windows/releases 安装完成添加到环境变量；

nvm 命令：

•  nvm install node     　　      ：安装最新版 node.js；
•  nvm install [version]         ：安装指定版本 ；
•  nvm use [version]                ：使用某个版本；
•  nvm list                                 ：列出已安装的 node；
•  nvm uninstall [version]     ：卸载；
•  nvm node_mirror [url]         ：设置 node 镜像；
•  nvm npm_mirror [url]           ：设置 npm 镜像；

npm：安装 node 时会自动安装

使用 npm 进行安装：

•  npm install express           ：当前环境下安装；
•  npm install express -g     ：全局安装；

报错时的解决方法：

报错信息：npm err: Error: connect ECONNREFUSED 127.0.0.1:8087
解决方法：npm config set proxy null

gulp 的使用：

• npm init ：在 cmd 终端输入，可创建 package.json 文件，
• npm install gulp -g ：安装在系统级别下；
• npm install gulp --save-dev ：在本地需使用 require 的方式 gulp，所以需安装在本地级别并将安装的包添加到 package.json 下的 devDependencies 依赖中。
• （devDenpendencies 用来记录开发环境下使用的包；dependencies 是用来记录使用命令 npm install xx --save 的生产环境下使用的包。）
• 发送项目给他人时，只需发送 package.json 包，不发送 node_modules 包。然后另一方运行 npm install 即可获得项目所需的包文件 node_modules ；

gulpfile.js文件：

var gulp = require("gulp");
var cssnano = require("gulp-cssnano");
var rename = require("gulp-rename");
var uglify = require("gulp-uglify");
var concat = require("gulp-concat");
var imagesmin = require("gulp-imagemin");
var cache = require("gulp-cache");
var bs = require("browser-sync").create();

//console.log：在控制台加载信息；
gulp.task("greet",function () {
    console.log("hello world");
});

//pipe：管道，数据进行下一阶段的传输；
//src：读取需要操作的文件
//cssnano：css的压缩
//rename：修改文件的名字，suffix：改后缀名；
//dest：指定编译处理后的文件存放目录
//stream：重新加载文件；
gulp.task("css",function () {
    gulp.src("./css/*.css")
        .pipe(cssnano())
        //index.css  ->index.min.css
        .pipe(rename({"suffix":".min"}))
        .pipe(gulp.dest("./dist/css/"))
        .pipe(bs.stream())
});

//concat：文件合并
//uglify：对js文件进行压缩和丑化（修改变量名）
//toplevel：在顶级范围内压缩和/或修改变量。为True时，只显示简单的代码内容；
//drop_console：为True时，删除控制台打印的语句；
gulp.task("js",function () {
    gulp.src("./js/*.js")
        .pipe(concat("index.js"))
        .pipe(uglify({
            'toplevel':true,
            'compress':{
                'drop_console':true
            }
        }))
        .pipe(rename({"suffix":".min"}))
        .pipe(gulp.dest("./dist/js/"))
        .pipe(ps.stream())
});

//cache：缓存；
//imagesmin：压缩图片；
gulp.task("images",function () {
    gulp.src("./images/*.*")
        .pipe(cache(imagesmin()))
        .pipe(gulp.dest("./dist/images/"))
        .pipe(ps.stream())
});

//watch：实时监听文件变化并更新
//['css']：监听后执行名字为‘css’的任务。
gulp.task("watch",function () {
    gulp.watch("./css/*.css",['css'])
});

//browser-sync：实时刷新浏览器，初始化任务；
//init：启动browser-sync服务；
gulp.task("bs",function () {
    bs.init({
        'server':{
            'baseDir':'./'
        }
    })
});

//默认任务，先运行表bs,watch,实时监听文件变化与刷新浏览器；终端输入：gulp。
gulp.task("default",['bs','watch']);

cmd操作：

参考资料：

• npm的安装与使用：http://pwstrick.github.io/PrimusUI/docs/gulp/install.html
• gulp的使用说明：
  • https://www.gulpjs.com.cn/  
  • https://neveryu.github.io/2017/05/01/gulp/
  • https://github.com/mishoo/UglifyJS2#mangle-options

sass

　　一个 CSS 的扩展，它在 CSS 语法的基础上，允许使用变量、嵌套规则、混合、导入等功能。使用 Sass 以及 Compass 样式库 有助于更好地组织管理样式文件，以及更高效地开发项目。（两种后缀名：.scss、.sass。表示两种不同语法；这里使用 .scss 语法）

var sass = require("gulp-sass");

//使用sass处理，以及发生错误时的处理；
gulp.task("css",function () {
    gulp.src("./css/*.scss")
        .pipe(sass().on('error',sass.logError))
        .pipe(cssnano())
        //index.css  ->index.min.css
        .pipe(rename({"suffix":".min"}))
        .pipe(gulp.dest("./dist/css/"))
        .pipe(bs.stream())

//scss的监听
gulp.task("watch",function () {
    gulp.watch("./css/*.scss",['css'])
});