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']);