Gulp介绍与Hexo优化

介绍

什么是Gulp

gulp.js是一种基于流的,代码优于配置的新一代构建工具.官方文档

GulpGrunt类似。但相比于 Grunt 的频繁的 I/O 操作,Gulp 的流操作,能更快地完成构建

Gulp特性

  • 使用方便

通过代码优于配置的策略,Gulp可以让简单的任务简单,复杂的任务更可管理。

  • 构建快速

通过流式操作,减少频繁的 IO 操作,更快地构建项目。

  • 插件高质

Gulp 有严格的插件指导策略,确保插件能简单高质的工作。

  • 易于学习

少量的API,掌握Gulp可以毫不费力。构建就像流管道一样,轻松加愉快。

Gulp安装

Gulp是基于Node.js的,故要首先安装 Node.js。

npm install -g gulp

然后按以下清单文件安装

gulp
gulp-htmlclean
gulp-htmlmin
gulp-minify-css
gulp-uglify

方法是同样的,npm install xxx --save,xxx即为清单列表文件名

其中gulp是工程的核心程序,Gulp采用插件方式进行工作,下面的5个文件就是基于Gulp的插件.Gulp插件列表

使用Gulp优化Hexo

建立gulpfile.js

var gulp = require('gulp');

    //Plugins模块获取
    var minifycss = require('gulp-minify-css');
    var uglify = require('gulp-uglify');
    var htmlmin = require('gulp-htmlmin');
    var htmlclean = require('gulp-htmlclean');

    // 压缩 public 目录 css文件
    gulp.task('minify-css', function() {
        return gulp.src('./public/**/*.css')
            .pipe(minifycss())
            .pipe(gulp.dest('./public'));
    });

    // 压缩 public 目录 html文件
    gulp.task('minify-html', function() {
      return gulp.src('./public/**/*.html')
        .pipe(htmlclean())
        .pipe(htmlmin({
             removeComments: true,
             minifyJS: true,
             minifyCSS: true,
             minifyURLs: true,
        }))
        .pipe(gulp.dest('./public'))
    });

    // 压缩 public/js 目录 js文件
    gulp.task('minify-js', function() {
        return gulp.src('./public/**/*.js')
            .pipe(uglify())
            .pipe(gulp.dest('./public'));
    });


    // 执行 gulp 命令时执行的任务
    gulp.task('default', [
        'minify-html','minify-css','minify-js'
    ]);

运行

要运行gulp任务,只需切换到存放gulpfile.js文件的目录,然后在终端中执行gulp命令就行了,gulp后面可以加上要执行的任务名,例如gulp task1,如果没有指定任务名,则会执行任务名为default的默认任务。

转载于:https://www.cnblogs.com/peihao/p/5365725.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值