JavaScript学习笔记（五十一）——gulp

gulp

Gulp是一个工程化工具，编译打包构建工具。

• 安装：

  • 全局安装：npm install -g gulp
  • 本地安装：npm install gulp

• 全局安装gulp是负责提供命令，本地安装是为了本项目使用

• 入口文件/配置文件：gulpfile.js

• gulp自带的方法：

  • gulp.task(taskName, content); 定义任务
  • gulp.src(); 定位资源
  • gulp.src().pipe() 定义管道 管道中是具体的操作 可以链式调用
  • gulp.dest(dirPath); 发布资源
  • gulp.watch(dirPath, content); 监听文件变化 自动执行任务

• 插件

• 压缩CSS

  • gulp-cssmin
  • gulp-clean-css

var {src, dest} = require("gulp");
var cssmin = require("gulp-cssmin");

// 定义任务
function doCSS(){
    // 定位资源
    return src("./project/css/*.css")
    // 定义管道
    .pipe(cssmin())
    // 发布资源
    .pipe(dest("./min/css"))
}
// 暴露
module.exports.doCSS = doCSS;

• 添加CSS前缀
  • gulp-autoprefixer

var {src, dest} = require("gulp");
var autoprefixer = require("gulp-autoprefixer");

// 定义任务
function addpre(){
    // 定位资源
    return src("./project/css/*.css")
    // 定义管道
    .pipe(autoprefixer())
    // 发布资源
    .pipe(dest("./min/css"))
}
// 暴露
module.exports.addpre = addpre;

• 转换ES6为ES5
  • gulp-babel@7.0.1
    • babel-core
    • babel-preset-es2015/ babel-preset-env
  • 插件的安装方式例如：npm i gulp-babel@7.0.1 babel-core babel-preset-es2015

var {src, dest} = require("gulp");
var babel = require("gulp-babel");
function change() {
    // 定位资源
    return src("./project/js/*.js")
    // 定义管道
    .pipe(babel({
        presets: ["es2015"]
    }))
    // 发布资源
    .pipe(dest("./min/js"))
}
// 暴露
module.exports.change = change;

• 压缩js
  • gulp-uglify

var {src, dest} = require("gulp");
var babel = require("gulp-babel");
var uglify = require("gulp-uglify");

// 定义任务
function doJS() {
    // 定位资源
    return src("./project/js/*.js")
    // ES6转ES5
    .pipe(babel({
        presets: ["es2015"]
    }))
    // 压缩js
    .pipe(uglify())
    // 发布资源
    .pipe(dest("./min/js"))
}

// 暴露
module.exports.doJS = doJS;

• 压缩html
  • gulp-htmlmin

var {src, dest} = require("gulp");
var htmlmin = require("gulp-htmlmin");
var babel = require("gulp-babel");

// 定义任务
function doHTML(){
    // 定位资源
    return src("./project/**/*.html")
    // 定义管道
    .pipe(htmlmin({
        // 是否压缩空白
        "collapseWhitespace": true,
        // 是否压缩style标签及其中的css代码
        "minifyCSS": true,
        // 是否压缩script标签及其中的js代码
        "minifyJS": true,
        // 是否移除没有属性值的HTML标准属性
        "removeEmptyAttributes": true
    }))
    // 发布资源
    .pipe(dest("./min/html"));
}

// 定义任务
function change(){
    // 定位资源
    return src("./project/**/*.js")
    // 定义管道
    .pipe(babel({
        presets: ["es2015"]
    }))
    // 发布资源
    .pipe(dest("./min/js"))
}

// 暴露
module.exports.doHTML = doHTML;
module.exports.change = change;

• 处理HTML片段
  • gulp-file-include

// 定义任务 处理HTML
gulp.task("html", function() {
    // 定位资源
    return gulp.src("./src/views/**")
    // 定义片段处理
    .pipe(fileinclude({
        // 自定义的符号
        prefix: "@_@", // 默认是 @@  经检测 $_$ 不让用
        // 定义你的组件的位置
        basepath: "./src/components"
    }))
    // 定义操作
    .pipe(htmlmin({
        "collapseWhitespace": true,
        "minifyCSS": true,
        "minifyJS": true,
        "removeEmptyAttributes": true
    }))
    // 发布出去
    .pipe(gulp.dest("./dist/views"))
});

• 处理sass任务
  • gulp-sass

var {src, dest} = require("gulp");
var sass = require("gulp-sass");
var autoprefixer = require("gulp-autoprefixer");
var cssmin = require("gulp-cssmin");

// 定义任务
function doSASS(){
    // 定位资源
    return src("./sass/*.scss")
    // 定义管道，处理sass
    .pipe(sass())
    // 添加前缀
    .pipe(autoprefixer())
    // 压缩css
    .pipe(cssmin())
    // 发布消息
    .pipe(dest("./min/sass"))
}
// 暴露
module.exports.doSASS = doSASS;

• 压缩图片
  • gulp-imagemin
    • 使用npm安装会报错，所以使用淘宝镜像下载，cnpm install gulp-imagemin

var {src, dest} = require("gulp");
var imagemin = require("gulp-imagemin");

// 定义任务
function imgmin(){
    // 定位资源
    return src("./images/*.*")
    // 定义管道
    .pipe(imagemin())
    // 发布资源
    .pipe(dest("./min/images"))
}

// 暴露
module.exports.imgmin = imgmin;

• 合并文件
  • gulp-concat

var {src, dest} = require("gulp");
var concat = require("gulp-concat");

function con(){
    return src("./project/*.js")
    .pipe(concat("abc.js"))
    .pipe(dest("./min/js"))
}

module.exports.con = con;

• 文件重命名
  • gulp-rename

var {src, dest} = require("gulp");
var rename = require("gulp-rename");

function cmm(){
    return src("./project/*.js")
    .pipe(rename("A.js"))
    .pipe(dest("./min/js"))
}

module.exports.cmm = cmm;