Gulp

Gulp

gulp常用插件列表

  • gulp-uglify  //使用uglify()函数,压缩代码,只能压缩js
  • gulp-concat  //使用concat()函数,合并代码
  • gulp-autoprefixer  //使用autoprefixer(),自动为css3属性添加浏览器私有前缀
  • gulp-csso    //压缩css代码
  • gulp-html-minify    //压缩html文件,去掉html文件的换行空格等
  • gulp-html-replace    //用来替换html中的构建块
  • gulp-base64    //将小图片转换为base64码
  • gulp-less    //编译less为css

gulp的初步了解

gulp是一个自动化构建工具,在项目开发阶段或部署阶段执行一些自动化任务。

gulp可以帮我们将书写的代码比那位真正可在生产环境中部署的代码,是实现自动化工作流的主要工具。

gulp的优点

  • 流式构建系统
  • 插件众多
  • 使用JavaScript配置
  • 底层的计算非常快
  • 可以并行执行任务
  • 可以创造完整的构建体系

gulp相对于grunt的优势

gulp跟grunt一样支持跨平台,即支持跨平台不是gulp独有的优势,不同在于grunt需要Gruntfile.js,gulp需要Gulpfile.js,最核心的不同之处在于,gulp是以流为核心的,而grunt是以配置加上文件io为核心的。

gulp的安装

  • 先安装nodejs环境,npm包管理系统就可以使用了
  • 运行命令npm install -g gulp-cli在npm上下载,并全局安装gulp,让gulp成为命令行接口,就可在命令行中直接使用gulp命令
  • 运行命令npm init创建pakeage.json文件,相当于“身份证文件”
  • 运行命令npm install --save gulp,将gulp进行本地安装,全局和本地都安装了,才能使用。

注意,因为是国外资源,安装时可使用cnpm淘宝镜像来安装。

gulpfile配置文件

  • gulpfile.js文件指导gulp工作
  • gulpfile文件中定义多个task,通常向外使用exports关键字
  • 这些task可以被gulp 任务名命令运行,默认的task叫做default,它可以被gulp命令运行

以下是gulpfile.js示例:

// 定义一个个task,task就是普通的函数
function task1() {
    console.log('我是task1!');
    return;// 必须有return,否则gulp会认为任务没有执行完毕
}
function task2() {
    console.log('我是task2!');
    return;// 必须有return,否则gulp会认为任务没有执行完毕
}
function task3() {
    console.log('我是task3!');
    return;// 必须有return,否则gulp会认为任务没有执行完毕
}

// 向外暴露
exports.t1 = task1;
exports.task2 = task2;
exports.t3 = task3;

// 外部使用就是gulp t1
// gulp task2

// 默认暴露
exports.default = task3;// 直接在命令行gulp直接运行

流的使用

  • 流是从一个源(source)流向一个终点(destination)的数据的序列
  • gulp中,src()函数创建可读流,dest()函数创建可写流。这两个函数组成基本的task
  • 流创建成功后,需要使用管道pipe()函数将流导入特定的处理方法。dest()函数也是其中的方法之一。

 以下是使用流的gulpfile.js的代码示例:

// 引入gulp文件,require表示引入,解构出三个函数
const {src, dest, pipe} = require("gulp");

// 定义task
function task1() {
    // src表示设置流的源头
    return src("./foo/**/*.txt") // 这里的一个*代表任意名字,**代表任意目录,也就是所有目录,所有文件
        // pipe表示管道,pipe()里面写函数
        // dest表示设置流的终点
        .pipe(dest("./bar"));
}

// 暴露
exports.default = task1;

gulp插件基本使用

  • 每个gulp插件都是一个函数,要将它放入pipe()函数中
  • pipe()管道可以链式调用(连续打点使用)

gulp使用各种插件的示例:

// 引入gulp文件,require表示引入,解构出三个函数
const {src, pipe, dest, parallel} = require('gulp');
// 引入插件
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
const autoprefixer = require('gulp-autoprefixer');
const csso = require('gulp-csso');
const htmlMinify = require('gulp-html-minify');
const htmlReplace = require('gulp-html-replace');
const base64 = require('gulp-base64');

function js() {
    return src('./app/js/**/*.js')
        .pipe(uglify())
        .pipe(concat('all.min.js'))
        .pipe(dest('./dest/js'));
}

function css() {
    return src('./app/css/**/*.css')
        .pipe(base64({
            extentions: ['png'],
            maxImageSize: 500*1024 // bytes 转换图片的最大尺寸
        }))
        .pipe(autoprefixer({
            browsers: ['last 2 version', '> 5%', 'firefox > 10', 'ie 6-8']
        }))
        .pipe(csso())
        .pipe(concat('all.min.css'))
        .pipe(dest('./dest/css'));
}

function html() {
    return src('./app/index.html')
        .pipe(htmlReplace({
            css: './css/all.min.css', // 需要在html文件中的link标签开头添加<!-- bulid:css -->和结尾添加<!-- endbuild -->
            js: './js/all.min.js'    //js和css同理,改为bulid:js
        }))
        .pipe(htmlMinify())
        .pipe(dest('./dest'));
}


// 暴露
exports.default = parallel(js, css, html);

 

平行运行多个task

  • parallel函数用来平行运行多个task
  • 平行运行的task没有先后之分,谁先谁后没有关系

使用watch()函数实时监控文件变化

 

posted @ 2019-04-04 00:57  骨子里的钟  阅读(369)  评论(0编辑  收藏  举报