1,gulp环境
npm init
//- 生成一个 package.json,里面是一些常规的配置信息
npm install gulp gulp-minify-css gulp-rev gulp-rev-collector del gulp-clean gulp-run-sequence gulp-uglify gulp-concat --save-dev
//- 安装插件到项目目录内
npm install --global gulp
2,gulpfile.js文件
var gulp = require('gulp');
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 del = require('del');
var clean = require('gulp-clean');
var runSequence = require('gulp-run-sequence');
gulp.task('clean', function() {
del('dist');
});
gulp.task('build-clean', function() {
return gulp.src('dist').pipe(clean());
});
gulp.task('css', function() { //- 创建一个名为 concat 的 task
gulp.src(['../WebContent/**/*.css']) //- 需要处理的css文件,放到一个字符串数组里
.pipe(minifyCss()) //- 压缩处理成一行
.pipe(rev()) //- 文件名加MD5后缀
.pipe(gulp.dest('dist')) //- 输出文件本地
.pipe(rev.manifest({path:'rev-manifest-css.json'})) //- 生成一个rev-manifest.json
.pipe(gulp.dest('dist')); //- 将 rev-manifest.json 保存到 rev 目录内
});
参考http://www.tuicool.com/articles/A7fqUn
var uglify = require('gulp-uglify'); // js压缩
gulp.task('js', function() {
return gulp.src('../WebContent/**/*.js') // 指明源文件路径、并进行文件匹配
.pipe(uglify({ preserveComments:'some' })) // 使用uglify进行压缩,并保留部分注释
.pipe(rev())
.pipe(gulp.dest('dist')) // 输出路径
.pipe(rev.manifest({path:'rev-manifest-js.json'})) //- 生成一个rev-manifest.json
.pipe(gulp.dest('dist')); //- 将 rev-manifest.json 保存到 rev 目录内
});
gulp.task('rev',['js','css'], function() {
gulp.src(['dist/rev-manifest-js.json','dist/rev-manifest-css.json', '../WebContent/**/*.html']) //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
.pipe(revCollector()) //- 执行文件内css名的替换
.pipe(gulp.dest('dist')); //- 替换后的文件输出的目录
});
gulp.task('build', function(cb) {
runSequence('build-clean','rev');
});
gulp.task('default', ['build']);
相关推荐
gulp-wind-assets-md5 版本化 html 和 css 中的静态文件安装使用 NPM 安装包: npm install gulp-wind-assets-md5 用法 var windmd5 = require ( 'gulp-wind-assets-md5' ) ;gulp . task ( 'windmd5' , function ( )...
我的 Github Star 整理整理至 2015.10.23一、前端工程相关项目说明百度出品的前端集成解决方案基于流的构建系统Gulp 插件,给文件名加 MD5 戳Gulp 插件,处理 CSS 文件依赖Gulp Babel 插件,把 ES6 代码转为 ES5包...
gulp入门项目 团队 结果 npm i 安装依赖项 gulp 运行构建,服务器和文件跟踪 folder=src/img npm start img:opt 手动图像优化 gulp critical 手动内联关键CSS 开始工作 将此存储git clone ...
html,css,js代码压缩,添加MD5 gulp-autoprefixer浏览器专有连续自动补全 运行 1.编译并生成开发版本 npm run dev或者gulp dev 2.本地运行开发版本,支持实时刷新 npm run run或者gulp run 3.输出生产版本,添加...
gulp重命名加用法首先,安装gulp-rename-plus作为开发依赖项:npm install --save-dev gulp-md5-plus 然后,将其添加到您的gulpfile.js : var rename = require ( "gulp-rename-plus" ) ;gulp . src ( "./src/*.css...
html动态更新css,js引用的md5码 项目链接: 使用方法 1. 依赖安装 - 安装nodejs 本机采用v6.10.1版本; - 全局安装gulp:npm install gulp -g - git clone git@github.com:li2568261/gulp-multipage.git; - 在当前...
Kero是一个用于扩展MVVM架构中数据模型的JS类库,实现了数据和UI的...├─gulpfile.js 通过gulp对项目源文件(CSS/JS)生成dist中的最终产出 ├─package.json node说明 └─README.md 项目说明 标签:Kero
html动态更新css,js引用的md5码 使用方法 1. 依赖安装 - 安装nodejs; - 全局安装gulp:npm install gulp -g - git clone https://github.com/jiangdonghua/gulp-multipage.git; - 在当前目录下打开命令行(tips:...
<项目介绍> 启动 运行:npm install安装依赖包 前端启动: gulp 或者 npm run dev 前端构建: gulp build 或者 npm run build 后端启动: node server 数据库: 根据server/setting.js 的配置连上数据库 ...
html、css、js 代码压缩,添加MD5 gulp-autoprefixer 浏览器私有前缀自动补全 运行 1. 编译并生成开发版本 npm run dev 或者 gulp dev 2. 本地运行开发版本,支持实时刷新 npm run run 或者 gulp run 3. 输出生产...
[注意]该项目是实验项目,请勿在生产环境中使用。 使用Visualforce开发前端时,这是一个启动项目 前提 节点> = 0.12 gulp-cli> = 0.3.0 凉亭> = 1.4.1 蚂蚁> = 1.9.5 安装 git clone ...
安装npm install gulp-flatten用法带有凉亭成分的示例源目录: ├── angular│ ├── README.md│ ├── angular-csp.css│ ├── angular.js│ ├── angular.min.js│ └── bower.json├── angular...
此项目尚处于早期积极开发中,尚无法使用。 项目布局 gulp/前端构建配置 gulpfile.js前端构建脚本 htdocs/用于Web服务器根目录的文件static/静态文件(CSS,JavaScript,图像和字体),从Gulp输出 node_modules/ ...
这个 gulpfile.js 使用了 gulp-ruby-sass,但它不是最新版本。 版本在package.json固定为 0.7.0。 必要的东西 节点.js 新产品经理 Ruby Sass 超过 3.1 粗鲁的 目录结构 编辑的文件存放在src目录下,当你执行 gulp ...
这将在不使用浏览器同步实时预览的情况下从CSS中的KSS文档创建项目资产的build目录和styleguide目录。 目录结构 请随意修改source目录中的所有内容,并记住, styleguide gulp build命令都会重新build styleguide和...
目前主要针对CSS和JS的合并、压缩、添加md5版本号,其他功能后续添加! 一、项目结构 以 public/src/demo/module-test/ 做为案例 package.json gulpfile.js - public - src rjs-config-s.js - demo rjs-...
gulpfile 有几个任务: gulp gulp stylus将使用三个插件编译 public/css 目录中的所有 .styl 文件: :为手写笔提供布局/网格系统:提供简单的媒体查询和断点 : autoprefixes 手写笔gulp build运行 jekyll build。...
OpenPOS使用MEAN堆栈,这是一个完整JavaScript框架: Node.js是一个开放源代码JavaScript运行时环境,用于执行服务器端JavaScript代码。 该平台基于Google Chrome的V8 JavaScript引擎构建。 它具有高度可扩展性和...
通过文件md5 options Type: object All false by default. {STRING} relativeUrls - 静态文件绝对路径地址,需要传入该参数 Example index.css: .a{ background:url(../img/btn.png); } gulpfile.js: var gulp=...
基于webpack和gulp的H5小项目生成器H5日益普及,为了方便日后开发的方便,特此写一个模板生成器为日后使用在HTML中支持使用@@ include约会一个.inc... yo zyy-h5使用模板开发gulp dev发布(会压缩css和js,并增加md5