项目环境配置

nvm:

node版本管理工具，安装和环境变量

cmd常用命令：

· nvm use [version]: 切换至指定版本的node

· nvm install node:安装最新版本的 node.js，nvm i == nvm install

· nvm install [version]:安装指定版本的node.js

· nvm use [version]:安装某个版本的node

· nvm list:列出了当前安装了那些版本的node

· nvm uninstall [version]: 卸载指定版本的node

· nvm node_mirror [url]: 设置 nvm 的镜像

· nvm npm_mirror [url]: 设置 npm 的镜像

npm：

在安装node的时候会自动安装

包安装工具

cmd常用命令：

· npm -v：查看当前使用的npm版本

· npm install [express]：本地安装指定包，需要使用require()导入包

· npm install [express] -g：全局安装指定包，可以再命令行中使用

· npm uninstall [package]: 卸载指定包，本地

· npm uninstall [package] -g: 卸载指定包，全局

· npm update [package]: 更新指定包，本地

· npm update [package] -g: 更新指定包，全局3

· npm search [package]: 搜索包

3. gulp

自动化流程管理工具

使用npm安装：npm install gulp -g

cmd常用命令：

· npm init：创建package.json文件

· npm install [package] --save-dev:会自动记录到package.json文件中

gulpfile.js示例1（gulp4）：

备注：最新 gulp5 任务模块 gulpfile.js Github地址：https://github.com/li-jingxuan/gulp-template

//require("包名")：导入包
// 导入gulp插件包
var gulp = require("gulp");

// css压缩插件包
var cssnano = require("gulp-cssnano");
// 文件重命名插件包
var rename = require("gulp-rename");
// gulp-uglify压缩javascript文件
var uglify = require("gulp-uglify");
// 合并js文件，减少网络请求
var concat = require("gulp-concat");
// 对图片文件进行缓存
var cache = require("gulp-cached");
// gulp-imagemin压缩图片文件（包括PNG、JPEG、GIF和SVG图片）
var imagemin = require("gulp-imagemin");
// 动态刷新浏览器的插件
var bs = require("browser-sync").create();
// 将scss压缩转换为css
var scss = require("gulp-sass");
// 这个插件中有一个方法log,可以打印出当前js的错误信息
var util = require("gulp-util");
// 当压缩后的js出现问题的时候，能够定位到具体行（因为压缩后的js全部在一行）
var sourcemaps = require("gulp-sourcemaps");
// 创建一个字典，存放各种路径
var path = {
"html": "./templates/**/",
"css": "./src/css/**/",
"js": "./src/js/**/",
"images": "./src/image/",
"css_dist": "./dist/css_dist/",
"js_dist": "./dist/js_dist/",
"images_dist": "./dist/image_dist/"
};

//对src/css/目录下的所有.css文件进行压缩并且存放在dist/css/目录下
css = function () {
return gulp.src(path.css + "*.css")
.pipe(cssnano())
.pipe(rename({"suffix": ".min"}))
.pipe(gulp.dest(path.css_dist))
.pipe(bs.stream)
};

// 对src/css/目录下的所有.css文件进行压缩并且存放在dist/css/目录下
scss = function () {
return gulp.src(path.css + "*.scss")
.pipe(scss())
.pipe(rename({"suffix": ".min"}))
.pipe(gulp.dest(path.css_dist))
.pipe(bs.stream())
};

// 对/templates/文件夹下所有的.html文件进行加载（**/：表示任意多级子文件夹）
html = function () {
return gulp.src(path.html + "*.html")
.pipe(bs.stream())
};

// 对src/js/目下的所有.js文件进行压缩并且存放在dist/js/目录下
js = function () {
return gulp.src(path.js + "*.js")
// 当js出问题了的时候，能够定位到哪一行
// 在文件加载前调用一下，初始化
.pipe(sourcemaps.init())
// .on("error",util.log())：当js产生错误是，打印出日志，不退出任务
.pipe(uglify().on("error", util.log))
// 文件重命名
.pipe(rename({"suffix": ".min"}))
// 在文件全部处理完之后，在调用write()方法
.pipe(sourcemaps.write())
.pipe(gulp.dest(path.js_dist))
// 修改文件后重新加载
.pipe(bs.stream())
};

// 对src/images/目下的所有.images文件进行压缩并且存放在dist/images/目录下
images = function () {
return gulp.src(path.images + "*.*")
// 压缩图片文件需要先使用cache()将图片缓存起来，在使用imagemin()进行压缩
.pipe(cache(imagemin()))
.pipe(gulp.dest(path.images_dist))
// 修改文件后重新加载
.pipe(bs.stream())
};

// 对文件修改进行监听
watch = function () {
/*
* gulp.watch：创建一个监听任务
* 参数1：需要监听的文件（可以监听一个文件夹下所有的文件）
* 参数2：监听到文件修改后，需要执行的gulp任务或者监听方法
*/
gulp.watch(path.html + "*.html", html);
gulp.watch(path.css + "*.scss", scss);
gulp.watch(path.css + "*.css", css);
gulp.watch(path.js + '*.js', js);
gulp.watch(path.images + '*.*', images)
};

// 初始化 browser-sync 的任务
bs_gulp = function () {
bs.init({
'server': {
// 设置服务器的根目录
'baseDir': './',
// 指定默认打开的文件
index: '/templates/news/index.html'
}
});
};

gulp.task('default', gulp.parallel(bs_gulp, watch));

// //当转换为django模板后使用此默认任务
//gulp.task('default',gulp.parallel(watch));

gulpfile.js示例2（gulp3）：

//require("包名")：导入包
// 导入gulp插件包
var gulp = require("gulp");
// css压缩插件包
var cssnano = require("gulp-cssnano");
// 文件重命名插件包
var rename = require("gulp-rename");
// gulp-uglify压缩javascript文件
var uglify = require("gulp-uglify");
// 合并js文件，减少网络请求
var concat = require("gulp-concat");
// 对图片文件进行缓存
var cache = require("gulp-cached");
// gulp-imagemin压缩图片文件（包括PNG、JPEG、GIF和SVG图片）
var imagemin = require("gulp-imagemin");
// 动态刷新浏览器的插件
var bs = require("browser-sync").create();
// 将scss压缩转换为css
var scss = require("gulp-sass");
// 这个插件中有一个方法log,可以打印出当前js的错误信息
var util = require("gulp-util");
// 当压缩后的js出现问题的时候，能够定位到具体行（因为压缩后的js全部在一行）
var sourcemaps = require("gulp-sourcemaps");
// 创建一个字典，存放各种路径
var path = {
"html":"./templates/**/",
"css":"./src/css/**/",
"js":"./src/js/**/",
"images":"./src/image/",
"css_dist":"./dist/css_dist/",
"js_dist":"./dist/js_dist/",
"images_dist":"./dist/image_dist/"
};

//对src/css/目录下的所有.css文件进行压缩并且存放在dist/css/目录下
gulp.task("css",function () {
gulp.src(path.css + "*.css")
.pipe(cssnano())
.pipe(rename({"suffix":".min"}))
.pipe(gulp.dest(path.css_dist))
// 修改文件后重新加载
.pipe(bs.stream())
});

// 对src/css/目录下的所有.css文件进行压缩并且存放在dist/css/目录下
gulp.task("scss",function () {
gulp.src(path.css + "*.scss")
.pipe(scss())
.pipe(rename({"suffix":".min"}))
.pipe(gulp.dest(path.css_dist))
// 修改文件后重新加载
.pipe(bs.stream())
});

// 对/templates/文件夹下所有的.html文件进行加载（**/：表示任意多级子文件夹）
gulp.task("html",function () {
gulp.src(path.html + "*.html")
// 修改文件后重新加载
.pipe(bs.stream())
});

// 对src/js/目下的所有.js文件进行压缩并且存放在dist/js/目录下
gulp.task("js",function () {
gulp.src(path.js + "*.js")
//当js出问题了的时候，能够定位到哪一行
// 在文件加载前调用一下
.pipe(sourcemaps.init())

    // .on("error",util.log())：当js产生错误是，打印出日志，不退出任务  
   .pipe(uglify().on("error",util.log))

   .pipe(rename({"suffix":".min"}))  
    // 在文件全部处理完之后，在调用write()方法  
   .pipe(sourcemaps.write())

   .pipe(gulp.dest(path.js\_dist))  
    // 修改文件后重新加载  
   .pipe(bs.stream())  

});

// 对src/images/目下的所有.images文件进行压缩并且存放在dist/images/目录下
gulp.task("images",function () {
gulp.src(path.images + "*.*")
// 压缩图片文件需要先使用cache()将图片缓存起来，在使用imagemin()进行压缩
.pipe(cache(imagemin()))
.pipe(gulp.dest(path.images_dist))
// 修改文件后重新加载
.pipe(bs.stream())
});

// 对文件修改进行监听
gulp.task("watch",function () {
/*
* gulp.watch：创建一个监听任务
* 参数1：需要监听的文件（可以监听一个文件夹下所有的文件）
* 参数2：监听到文件修改后，需要执行的gulp任务
*/
gulp.watch(path.html + "*.html",["html"]);
gulp.watch(path.css+"*.scss",['scss']);
gulp.watch(path.css+"*.css",['css']);
gulp.watch(path.js+'*.js',['js']);
gulp.watch(path.images + '*.*',['images'])
});

// 初始化 browser-sync 的任务
gulp.task("bs",function () {
bs.init({
'server':{
// 设置服务器的根目录
'baseDir':'./',
index:'/templates/news/index.html' // 指定默认打开的文件
}
//port:8050 // 指定访问服务器的端口号
});
});

// gulp.task('test',function () {
// console.log('hello word!');
// });

// 创建一个默认的任务
// gulp.task("default",['bs','watch']);

// 如果使用了django模板渲染，则不能使用 'bs' 服务，只能使用['watch']任务监听文件修改
gulp.task('default',['watch']);