实现的功能包括 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自动化构建工具的更多相关文章

  1. gulp自动化构建工具

    gulp    自动化构建工具,实时监控.代码合并.压缩... http://www.gulpjs.com.cn/     中文网 http://gulpjs.com/plugins/     英文网 ...

  2. 前端自动化构建工具gulp的使用总结

    前端自动化构建工具gulp的使用总结 博主最近偶的空闲,在此对gulp的使用做一个总结,让小伙伴知道如何合理的使用gulp以及gulp的使用技巧. 谈到gulp,有人可能就会想到另外一个构建工具gru ...

  3. 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍

    前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...

  4. 前端自动化构建工具——gulp

    gulp是基于流的前端自动化构建工具. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到 ...

  5. 前端自动化构建工具 Gulp 使用

    一个月没写博客了,今天有时间,就写个gulp的入门使用吧.. 简介:gulp是一个前端自动化构建工具,可以实现代码的检查.压缩.合并……等等,gulp是基于Node.js的自动任务运行器 一.安装No ...

  6. gulp前端自动化构建工具新手入门篇

    很久没有更新博文了. 经过了一次年前吐血的赶项目,终于在年后回血了.趁着有空,新学到了一个前端自动化构建工具-gulp. 现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gul ...

  7. 前端自动化构建工具-yoman浅谈

    如今随着前端技术的飞速发展,前端项目也变得越来越复杂. 快速的搭建一个集成多种工具和框架的复杂前端项目也越来越成为一种需求. 当然如果你要自己从0开始完全自己diy,绝对可以,只不过需要耗费一些不少的 ...

  8. JavaScript自动化构建工具入门----grunt、gulp、webpack

    蛮荒时代的程序员: 做项目的时候,会有大量的js 大量的css   需要合并压缩,大量时间需要用到合并压缩 在前端开发中会出现很多重复性无意义的劳动  自动化时代的程序员: 希望一切都可以自动完成  ...

  9. Visual Studio Code初识与自动化构建工具安装

    1.Visual Studio Code如何新建文件夹 要自己手动在本地新建,然后再点击文件->打开文件夹即可. 之后你就可以任意添加文件了 2.如何使用自动化构建工具 通过自动化构建工具,用户 ...

随机推荐

  1. des的根据key进行加密和解密方法

    DES加密: public static string DESEncode(string content, string key) { DESCryptoServiceProvider des = n ...

  2. 在Visual Studio 2010里面使用.NET 4.5里面新增加的HttpClient

    Install-Package Microsoft.Net.Http 为了能同步使用(也就是使用await等关键字) Install-Package Microsoft.Bcl.Async 确认在Vi ...

  3. SWFUpload 参数详解

    属性   类型 默认值 描述 upload_url String 处理上传文件的服务器端页面的url地址,可以是绝对地址,也可以是相对地址,当为相对地址时相对的是当前代码所在的文档地址 preserv ...

  4. ROS根据访问不同的网址,走不同的路由策略的脚本

    脚本如下,可以10s一循环计划执行 :global tmpaaa [/ip firewall address-list find list=Not-To-Guowai];foreach i in $t ...

  5. 彩色图像直方图均衡(Histogram Equalization)

    直方图均衡(Histogram Equalization) 一般步骤: 1.统计直方图每个灰度级出现的次数(概率) 2.累计归一化的直方图 3.计算新的像素值 重要:彩色直方图均衡不能对RGB分别做再 ...

  6. GCD中的线程死锁问题

    GCD 确实好用 ,很强大,相比NSOpretion 无法提供 取消任务的功能. 如此强大的工具用不好可能会出现线程死锁. 如下代码: - (void)viewDidLoad { [super vie ...

  7. 深入浅出:了解jsonp跨域的九种方式

    什么是“”跨域”: 跨域访问,简单来说就是 A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容.由于安全原因,跨域访问是被各大浏览器所默认禁止的.当一个域与其他域建立了信 ...

  8. avalon.js的循环操作在表格中的应用

    avalon.js的循环操作在表格中的应用 一个JAVA开发,因为做的门户系统中,数据的展示加载的速度很影响使用效果,想到的是尽量少的请求后台,然后接触到了avalon,看介绍这是一个很轻很轻的MVV ...

  9. iconv for linux(c)

    // code_convert("gb2312","utf-8",inbuf,outbuf,outlen);static int code_convert(co ...

  10. 爬虫学习(十五)——json解析

    json与jsonpath 对象{}:jsonobject 对象:对象在js中表现为{}括起来的内容,数据结构为{key:value,key:value...}键值对的结构,在面向对象的结构中,key ...