windows从零使用gulp——修改静态文件名
来源:互联网 发布:淘宝pad版 编辑:程序博客网 时间:2024/06/04 17:54
1、前期准备:安装nodejs和npm,这个自己网上查找类似的资料
2、安装cnpm:npm install cnpm -g --registry=https://registry.npm.taobao.org
由于npm安装插件过程经常下载缓慢或出现异常,可以选择安装cnpm。以下过程就是按照cnpm来写,如果想用npm只要把cnpm替换成npm即可
3、全局安装gulp:cnpm install gulp -g。
查看是否正确安装:命令提示符执行gulp -v,出现版本号即为正确安装。
4、本地安装gulp插件:cd到项目根目录下
cnpm install --save-dev gulp gulp-clean gulp-minify-css gulp-rename gulp-rev gulp-rev-collector gulp-concat gulp-notify gulp-html-replace gulp-replace gulp-htmlmin gulp-livereload把你用到的插件都安装进去,上面只是示例,可以添加或者删除插件
5、新建gulpfile.js文件
同样在根目录下新建gulpfile.js文件,以下就是实现修改静态文件名的gulpfile.js文件
var gulp = require('gulp'), //基础库 clean = require('gulp-clean'), //清空文件夹 minify = require('gulp-minify-css'), //css压缩 rename = require('gulp-rename'), //文件重命名 revContent = require('gulp-rev'), //更改版本名 revCollector = require('gulp-rev-collector'), //gulp-rev的插件,用于html文件更改引用路径 concat = require('gulp-concat'), //合并多个文件 notify = require('gulp-notify'), //提示 htmlreplace = require('gulp-html-replace'), replace = require('gulp-replace'), htmlmin = require('gulp-htmlmin'), livereload = require('gulp-livereload');gulp.task('clean',function(){ return gulp.src('build',{ read : false}) //src的第二个参数的{read:false},是不读取文件,加快程序。 .pipe(clean());})gulp.task('index',['clean'],function(){ return gulp.src(['app*/index.html']) .pipe(rename(function(path){ path.basename ='index'; path.extname = ".html"; })) .pipe(gulp.dest('build/'))})gulp.task('readyFile',['index'],function(cb){ //修改文件名 return gulp.src(['app*/css*/*.css','app*/js*/**/*.js']) .pipe(revContent()) .pipe(gulp.dest('build/')) .pipe(revContent.manifest()) .pipe(gulp.dest('build/rev'));})gulp.task('staticFile',['index'],function(cb){ //不改名的可以放到此处 return gulp.src(['app*/css*/fonts*/**','app*/lib*/**','app*/templates*/**','app*/img*/**','app*/json*/**']) .pipe(gulp.dest('build/'));})gulp.task('revFile',['readyFile'],function(){ //把index.html引用到的文件进行替换 return gulp.src(['build/rev/*.json','build/app*/*.html']) .pipe(revCollector({replaceReved: true}))//一定需要设置参数为true 否侧不会替换上一次的值 .pipe(gulp.dest('build/')) .pipe(notify("success!!!"))})gulp.task('default',['staticFile','revFile']);//默认执行函数
6、运行gulp:执行gulp default或gulp将会调用default任务里的所有任务['staticFile','revFile']。
虽然说是原创,但是大部分是把各个地方的东西归纳到一起了。
主要参考的是以下文章,有兴趣的可以去原文查看。
http://www.ydcss.com/archives/18#lesson1
http://www.cnblogs.com/MonaSong/p/5842808.html
http://cnodejs.org/topic/5516736ce26684ed7ff21e0f
http://sentsin.com/web/861.html
0 0
- windows从零使用gulp——修改静态文件名
- yum 使用——从零出发
- windows 批处理修改文件名
- Windows批量修改文件名
- 使用C#修改文件名
- 三分钟从零单排gulp-less配置
- windows下批量修改文件名
- windows下批量修改文件名
- windows下批量修改文件名
- windows底下批量修改文件名
- windows如何批量修改文件名
- Windows批量修改文件名后缀
- Windows下批处理修改文件名
- windows 下批量修改文件名
- 从零 使用vc
- 使用gulp实现静态资源版本号替换
- java修改文件名——极乐宿舍
- 使用PHP批量修改文件名
- js 过滤特殊字符
- t 检验
- 金蝶EAS“总账”系统召唤“反过账”按钮
- Android性能测试
- 设计模式-享元模式
- windows从零使用gulp——修改静态文件名
- 析构函数小结
- 使用torch遇到的一些问题
- Oracle逐行相加
- 利用C++模板,代替虚函数,实现类的静态多态性
- 七种跨域方法【7.location.hash篇】
- mysql 5.5.29绿色安装
- Java IO 1:IO和File
- 百度地图api-浏览器如何实时定位、画出轨迹?