基于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/doc...
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脚本就写的差不多了,麻雀虽小五脏俱全。如果大家有什么好的建议欢迎交流。
来源:https://segmentfault.com/a/1190000016792273
基于gulp的前端自动化方案的更多相关文章
- 基于gulp 的前端自动化构建方案总结
一,基础篇 先安装nodejs 使用淘宝镜像安装tnpm 安装 cnpm 插件:npm install -g cnpm --registry=https://registry.npm.taobao.o ...
- 使用Gulp构建前端自动化方案
前言 在刚入门前端的时候,我们并不清楚前端有工具可以帮我们自动化打包压缩文件,当时只关注能实现功能就可以了,也不太在意前端性能优化的问题,随着项目功能的复杂,项目也变得越来越大,页面的执行速度也开始变 ...
- 基于gulp的前端自动化开发构建
就前端的发展而言会越来越朝着后端的标准化靠近,后端的工程化以及模块化都很成熟.基于这样一个思路,开始探索如何优化目前的开发流程.而使用的工具就是gulp. 个人觉得gulp比较webpack更为简单实 ...
- 基于gulp的前端自动化开发构建新
关于gulp的使用,已经在之前写过一篇文章,但是遗留了一个问题.问题是实现文件的增量式更新,就是给html引入的js和css文件打上标记.每次更新标记更新. 上篇文章想通过开发同时实现标记的实时更新, ...
- 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)
通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...
- 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)
前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...
- 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一)
相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常用 Gulp 插件汇总 ...
- 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二)
前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 ...
- Gulp构建前端自动化工作流之:常用插件介绍及使用
在对Gulp有了一个初步的了解之后,我们开始构建一个较为完整的Gulp开发环境. 本文主要分为6个段落: 1. 构建项目目录结构(Directory Structure Build) 2. 插件介绍及 ...
随机推荐
- mysql存储ip数值
字段使用 int unsigned 类型就可以满足存贮ip2long(ip)的数值 插入时,可以使用inet_aton('100.200.30.22') 将ip地址转换为数值 查询时,使用inet_n ...
- linux的yum命令
linux yum 命令 yum( Yellow dog Updater, Modified)是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器. 基於RPM包管理,能够从指 ...
- 今天跟outlook顶上牛了
之前使用的是2007,然后之前弄东西的时候给升到2010了,之前就是把所有的邮件都保存到本地的文件中,我还想使用之前的文件,然后2010就是不好使,后来查了半天发现原来是需要手动创建账户,参考http ...
- 大哥带的Orchel数据库的报错注入
0X01 使用报错注入需要使用类似 1=[报错语句],1>[报错语句],使用比较运算符,这样的方式进行报错注入(MYSQL仅使用函数报错即可),类似mssql报错注入的方式. news.jsp? ...
- 大哥带的Orchel数据库的注入
0X01 先进行判断 a.jsp?username=SMITH and = 发现单引号闭合 我们尝试构造闭合 存在注入 a.jsp?username=SMITH'='1 正确 a.jsp?user ...
- vscode Vue格式化HTML标签换行问题
解决方法:在设置里面直接贴上代码: "vetur.format.defaultFormatter.html": "js-beautify-html", &quo ...
- 关于MySQL去除查询结果重复值
下面先来看看例子: table: id name 1 a 2 b 3 c 4 c 5 b 库结构大概这样,这只是一个简单的例子,实际情况会复杂得多. 比如我想用一条语句查询得到name不重 ...
- 使用SharpZIpLib写的压缩解压操作类
使用SharpZIpLib写的压缩解压操作类,已测试. public class ZipHelper { /// <summary> /// 压缩文件 /// </summary&g ...
- @RequestMapping 和@ResponseBody 和 @RequestBody和@PathVariable 注解 注解用法
接下来讲解一下 @RequestMapping 和@ResponseBody 和 @RequestBody和@PathVariable 注解 注解用法 @RequestMapping 为url映射路 ...
- python插件快速安装
windows下安装python插件没有linux那样方便. 可以先安装easy_install.我的是win64 下载地址 直接下载py文件运行,将对应目录添加到环境变量,我的是D:\dev_t ...