glup自动化构建工具
实现的功能包括 js压缩,css文件合并压缩并在html加版本号,压缩html文件
1.安装gulp
建议参考官网就行http://www.gulpjs.com.cn/docs/getting-started/
npm install gulp --save -dev [注:将gulp安装到项目]
npm init [注:根据提示一步一步创建package.json 最后yes保存]
添加 gulpfile.js文件 如步骤三
webstrom --》run--》选择运行default 这样就运行gulpfile.js文件了 [注:default,意思名为的default的task,如下]
gulp.task('default', [ 'copy', 'concat', 'replace','js']);
2.安装插件 主要用到以下插件
安装命令 npm install gulp-uglify gulp-concat gulp-minify-css gulp-rev gulp-rev-collector gulp-replace gulp-htmlmin --save -dev
3.gulpfile.js文件:
/**
* Created by jh on 2017/4/6.
*/
var gulp = require('gulp');
var minify = require('gulp-uglify'); //- 压缩js;
var concat = require('gulp-concat'); //- 多个文件合并为一个;
var minifyCss = require('gulp-minify-css'); //- 压缩CSS为一行;
var rev = require('gulp-rev'); //- 对文件名加MD5后缀
var revCollector = require('gulp-rev-collector'); //- 路径替换
var replace = require('gulp-replace'); //替换地址
var htmlmin = require('gulp-htmlmin'); //压缩html /*=====================copy其他静态资源文件==========================*/
gulp.task('copy', function() {
return gulp.src(['images/**/*'])
.pipe(gulp.dest('dist/images'))
});
/*=====================压缩js==========================*/
gulp.task('js',function(){
gulp.src('js/*.js') // 匹配
.pipe(minify())
.pipe(gulp.dest('dist/js')); // 写入 'dist/js'
});
//gulp.src('js/*.js', { base: 'client' })//会把源js也压缩
// .pipe(minify())
// .pipe(gulp.dest('build')); // 写入 'build/js/somedir/somefile.js' /*=====================合并、压缩css==========================*/
gulp.task('concat',function(){
gulp.src(['css/style.css', 'css/style.mine.css']) //- 需要处理的css文件,放到一个字符串数组里
.pipe(concat('style.rar.css')) //- 合并后的文件名
.pipe(minifyCss()) //- 压缩处理成一行
.pipe(rev()) //- 文件名加MD5后缀
.pipe(gulp.dest('dist/css')) //- 输出文件本地
.pipe(rev.manifest()) //- 生成一个rev-manifest.json
.pipe(gulp.dest('config')); //- 将 rev-manifest.json 保存到 rev 目录内
}); /*=====================打包、修改地址==========================*/
gulp.task('replace',function(){
gulp.src(['config/*.json','*.html'])
.pipe(revCollector()) //- 执行文件内css名的替换
.pipe(replace('css/','./css/')) //替换地址
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('dist'))
});
//gulp.task('replace',function(){
// gulp.src(['config/*.json', '*.html']) //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
// .pipe(revCollector()) //- 执行文件内css名的替换
// .pipe(gulp.dest('dist')); //- 替换后的文件输出的目录
//});
//gulp.task('city', ['js', 'concat', 'replace', 'revCollector']); gulp.task('city', [ 'copy', 'concat', 'replace','js']);
glup自动化构建工具的更多相关文章
- gulp自动化构建工具
gulp 自动化构建工具,实时监控.代码合并.压缩... http://www.gulpjs.com.cn/ 中文网 http://gulpjs.com/plugins/ 英文网 ...
- 前端自动化构建工具gulp的使用总结
前端自动化构建工具gulp的使用总结 博主最近偶的空闲,在此对gulp的使用做一个总结,让小伙伴知道如何合理的使用gulp以及gulp的使用技巧. 谈到gulp,有人可能就会想到另外一个构建工具gru ...
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...
- 前端自动化构建工具——gulp
gulp是基于流的前端自动化构建工具. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到 ...
- 前端自动化构建工具 Gulp 使用
一个月没写博客了,今天有时间,就写个gulp的入门使用吧.. 简介:gulp是一个前端自动化构建工具,可以实现代码的检查.压缩.合并……等等,gulp是基于Node.js的自动任务运行器 一.安装No ...
- gulp前端自动化构建工具新手入门篇
很久没有更新博文了. 经过了一次年前吐血的赶项目,终于在年后回血了.趁着有空,新学到了一个前端自动化构建工具-gulp. 现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gul ...
- 前端自动化构建工具-yoman浅谈
如今随着前端技术的飞速发展,前端项目也变得越来越复杂. 快速的搭建一个集成多种工具和框架的复杂前端项目也越来越成为一种需求. 当然如果你要自己从0开始完全自己diy,绝对可以,只不过需要耗费一些不少的 ...
- JavaScript自动化构建工具入门----grunt、gulp、webpack
蛮荒时代的程序员: 做项目的时候,会有大量的js 大量的css 需要合并压缩,大量时间需要用到合并压缩 在前端开发中会出现很多重复性无意义的劳动 自动化时代的程序员: 希望一切都可以自动完成 ...
- Visual Studio Code初识与自动化构建工具安装
1.Visual Studio Code如何新建文件夹 要自己手动在本地新建,然后再点击文件->打开文件夹即可. 之后你就可以任意添加文件了 2.如何使用自动化构建工具 通过自动化构建工具,用户 ...
随机推荐
- Docker和宿主机操作系统文件目录互相隔离的实现原理
我们知道在Docker容器里是无法访问到宿主操作系统的文件目录的,但这种隔离是怎么实现的呢? 其实一点也不神奇--利用了Linux系统的内部命令chroot. chroot能将进程的根目录设置成任意指 ...
- 如果有反向代理的情况下,获取最原始的IP的办法
HttpContext.Current.Request.ServerVariables["HTTP_X_FORWARDED_HOST"];
- POJ-3190 Stall Reservations---优先队列+贪心
题目链接: https://vjudge.net/problem/POJ-3190 题目大意: 有N头奶牛,每头奶牛都会在[1,1000000]的时间区间内的子区间进行挤奶.挤奶的时候奶牛一定要单独放 ...
- 5、Oracle备份(oracle备份脚本配置)
1.1 Oracle数据库备份 1.1.1 链接Oracle介质管理库 请在数据库节点上操作. [oracle@db01/usr/openv/netbackup/bin]$ ./oracle_link ...
- Java从入门到放弃——02.常量、变量、数据类型、运算符
本文目标 理解什么是常量,什么是变量 认识八大基本数据类型 了解算数运算符.赋值运算符.关系运算符.逻辑运算符.位运算符.三元运算符 1.什么是常量与变量? 常量是相对静止的量,比如整数:1,2,3 ...
- 20145238-荆玉茗 《Java程序设计》第6周学习总结
20145238 <Java程序设计>第6周学习总结 教材学习内容总结 第十章输入和输出 10.1.1 ·如果要将数据从来源中取出,可以使用输入串流,若将数据写入目的地,可以使用输出串流. ...
- chisel(安装)
github地址 先安装homeBrew ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/m ...
- 关于event loop
之前写了篇文章 JS运行机制,里面对event loop简单的说明,面试时又遇到了关于该知识点的题目(主要是process.nextTick和setImmediate的执行顺序不太知道,查了之后才知道 ...
- python读写dbf数据库
dbf数据库作为一种简单的数据库,曾经广泛使用.现在在金融领域还是有很多的应用之处,工作中遇到此类的问题,在此记录一下. 1. 读取dbf ''' 读取DBF文件 ''' def readDbfFil ...
- docker-compose 构建mongodb并导入基础数据示例
使用docker-compose构建mongodb服务并导入基础数据示例. 1.文件目录结构 ——mongo/ |——docker-compose.yml |——mongo-Dockerfile |— ...