Gulp自动化任务及nvm、npm常用命令
项目环境配置
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']);
