基于gulp的前端自动化方案

前言

最近几年前端技术发展日新月异,特别是单页应用的普及。组件化、工程化、自动化成了前端发展的趋势。webpack已经成为了前端打包构建的主流,但是一些`老古董`的项目还是存在的,也有优化的必要,正好公司的老项目需要优化,不多说拿gulp实践一下。

本文需要安装node(自行安装),并了解过gulp入门。gulp脚本下载:https://github.com/youhunwl/gulp 欢迎star。

实践

创建项目目录

首先初始化npm依赖项与基本信息,使用命令npm init一直回车,生成package.json文件,也可以直接去上边github仓库目录下载。

你的项目目录关系到你的gulp脚本里的任务路径,我脚本里写的是匹配所有的目录和文件。我简单举个例子:这里js/common里的js文件也会被处理。如果只想处理特定目录的文件,请修改任务里的路径。

demo/
├── css/
│   ├── index.css
├── js/
│   ├── common/
│   │       └─ common.js
│   ├── index.js
├── img/
│   ├── logo.png
└── index.html

安装所需依赖

安装gulp所需要的模块,这里直接列举我的package.json文件内容

{
  "name": "demo",
  "version": "0.0.0",
  "private": true,
  "dependencies": {},
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-cache": "^1.0.2",
    "gulp-clean-css": "^3.10.0",
    "gulp-htmlclean": "^2.7.15",
    "gulp-htmlmin": "^3.0.0",
    "gulp-if": "^2.0.2",
    "gulp-imagemin": "^4.1.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-notify": "^3.0.0",
    "gulp-path": "^3.0.3",
    "gulp-rev-append": "^0.1.8",
    "gulp-sequence": "^0.4.6",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-uglify": "^2.0.0",
    "uglify-js": "^3.3.9"
  }
}

编写gulp脚本

新建 gulpfile.js文件,并引入所需模块,这里我把路径统一写在PATHS中。具体关于路径的写法,可以去看gulp官网的api:https://www.gulpjs.com.cn/docs/api/

gulp-minify-css这个官网提示已经弃用,改用gulp-clean-css,这里保留只是为了告诉大家,效果一样,用户一致,为了保证项目不出问题,还是用最新的吧。

'use strict';
var gulp = require('gulp'),
    minifycss = require('gulp-minify-css'),//压缩css 已弃用
    cleancss = require('gulp-clean-css'),//压缩css
    imagemin = require('gulp-imagemin'),//压缩图片
    autoprefixer = require('gulp-autoprefixer'),//处理浏览器前缀
    uglify = require('gulp-uglify'),//压缩js
    sourcemaps = require('gulp-sourcemaps'),//生成 sourcemap
    gulpif = require('gulp-if'),//条件判断
    notify = require('gulp-notify'),//处理报错
    cache = require('gulp-cache'),//只压缩修改的图片
    htmlclean = require('gulp-htmlclean'),// 精简html
	htmlmin = require('gulp-htmlmin'),//压缩html
    rev = require('gulp-rev-append'),//增加版本号
    sequence = require('gulp-sequence'),//同步执行任务
    PATHS = {
    ROOT: './',
    DEST: './dist/',
    HTML: '**/*.{html,htm}',
    CSS: '**/*.css',
    IMG: '**/*.{png,jpg,gif,ico}',
    JS: '**/*.js'
}

压缩处理css

这里需要排除node_modules文件夹和生成构建的后的目录/dist/及它们的子目录,直接 !后面跟要排除的目录就行了。

gulp.task('minify-css', function () {
    return gulp.src([PATHS.CSS,'!./dist/**', '!./node_modules/**'])
     .pipe(sourcemaps.init())
     .pipe(autoprefixer({
        browsers: ['last 10 versions', 'Firefox >= 20', 'Opera >= 36', 'ie >= 9', 'Android >= 4.0', ],
        cascade: true, //是否美化格式
        remove: false //是否删除不必要的前缀
    }))
     .pipe(cleancss({
        keepSpecialComments: '*' //保留所有特殊前缀
    }))
     .pipe(sourcemaps.write('.'))
     .pipe(gulp.dest(PATHS.DEST))
     .pipe(notify({ message: 'css minify complete' }));
});

有些引用的css或者js不需要压缩,比如jQuery',Bootstrap,也或者是公司内部的公共库 .min.{css,js}等等。

这里咱们就用到gulp-if了,去排除min.css

var conditionCss = function (f) {
    if (f.path.endsWith('.min.css')) {
        return false;
    }
    return true;
};

再修改下处理css的操作

.pipe(gulpif(conditionCss, cleancss({
    keepSpecialComments: '*' //保留所有特殊前缀
})))

压缩处理js

同理排除下 min.js ,这里还要注意记得把 gulp脚本也排除不处理。

gulp.task('minify-js', function () {
    return gulp.src([PATHS.JS, '!./dist/**', '!./node_modules/**', '!gulpfile.js'])
     .pipe(sourcemaps.init())
     .pipe(gulpif(conditionJs, uglify()))
     .pipe(sourcemaps.write('.'))
     .pipe(gulp.dest(PATHS.DEST))
     .pipe(notify({ message: 'js minify complete' }));
});

压缩处理 img

gulp.task('minify-img', function () {
    return gulp.src([PATHS.IMG,'!./dist/**', '!./node_modules/**'])
        .pipe(cache(imagemin()))
        .pipe(gulp.dest(PATHS.DEST));
});

压缩处理HTML

gulp.task('minify-html', function () {
    return gulp.src(PATHS.DEST+PATHS.HTML)
        .pipe(htmlclean())
        .pipe(htmlmin({
        removeComments: true, //清除HTML注释
        collapseWhitespace: true, //压缩HTML
        minifyJS: true, //压缩页面JS
        minifyCSS: true, //压缩页面CSS
        minifyURLs: true
    }))
        .pipe(gulp.dest(PATHS.DEST));
});

增加版本号

gulp.task('rev', function () {
    return gulp.src([PATHS.HTML,'!./dist/**', '!./node_modules/**'])
        .pipe(rev())
        .pipe(gulp.dest(PATHS.DEST));
});

同步执行task

因为gulp所有的任务都是异步完成的,在有时候我们需要同步执行任务,比如:先编译less,在对编译好的css进行压缩,这个时候异步就有问题了。

gulp.task('deploy', sequence(['minify-css', 'minify-js'], 'minify-img', 'rev', 'minify-html'));

执行gulp所有任务

这里创建一个名为default 的任务,执行上面的deploy任务

gulp.task('default', ['deploy'], function (e) {
    console.log("[complete] Please continue to operate");
})

部署

在终端中输入 gulp或者gulp default执行构建,即可在我们设置的产出目录里看到我们压缩处理后的代码。

至此,一个简单的gulp脚本就写的差不多了,麻雀虽小五脏俱全。如果大家有什么好的建议欢迎交流。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏coding for love

从输入url到看到页面的过程分析

我思考了很多知识组织方法来帮助理解网络知识,比如按osi模型从底至上,或者按协议种类,或者按网络发展史。但最终我还是决定选择用这个经典的问题,将网络知识串成线。...

1102
来自专栏绿巨人专栏

Linux 技巧

当运行tmux时,实际上会运行一个tmux service,保持session的运行。

1582
来自专栏公有云大数据平台弹性 MapReduce

Presto内存调优及原理(基础篇)

Presto是一个开源的分布式SQL查询引擎,适用于交互式分析查询,数据量支持GB到PB字节。

1.5K8
来自专栏人工智能LeadAI

这几个问题答不对,就别说精通TCP

网络协议那么多,为什么面试喜欢问TCP?原因无外乎两个:1、TCP协议直接与进程打交道,写网络程序要用;2、TCP协议设计十分精巧,在一个不可靠的IP网络上实现...

4058
来自专栏即时通讯技术

脑残式网络编程入门(四):快速理解HTTP/2的服务器推送(Server Push)

新一代HTTP/2 协议的主要目的是为了提高网页性能(有关HTTP/2的介绍,请见《从HTTP/0.9到HTTP/2:一文读懂HTTP协议的历史演变和设计思路》...

864
来自专栏繁花云

[技巧]腾讯云服务器自助更换IP教程(无需任何费用)

选择确定转换,这时我们的IP已经转换成弹性IP(EIP)了,接着我们进入EIP控制继续操作:

8550
来自专栏Python中文社区

记一次惊心的网站TCP队列问题排查经历

作者:刘晓明,互联网公司运维技术负责人,拥有10年的互联网开发和运维经验。一直致力于运维工具的开发和运维专家服务的推进,赋能开发,提高效能。

1504
来自专栏FreeBuf

Arp欺骗原理及Android环境下的检测方法

测试环境说明 网关: IP:172.20.150.1 mac:24050FCE53 靶机(手机): IP:172.20.150.20 mac:000822...

36610
来自专栏啸天"s blog

安卓百度网盘Aria2下载脚本

2292
来自专栏xingoo, 一个梦想做发明家的程序员

caj转pdf——包含下载链接

很多人在知网上下载论文后,想转换成PDF格式,本片一站式教学,包含下载链接。 需要工具 1 caj格式的文件,即要转换的文件。 2 cajviewer,可...

3209

扫码关注云+社区