码迷,mamicode.com
首页 > Web开发 > 详细

js版本控制之gulp

时间:2017-09-18 22:16:36      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:处理   seq   str   nbsp   文件   打开   enc   我不知道   执行命令行   

微信浏览器有严重的缓存问题,所以在网上百度了一下 发现好多关于gulp 那就用它 ,再使用的过程中遇到了我不知道该怎么说的吭  幸好为时不晚 下面做一些记录

第一种:在引入文件后面加  ?rev=@@hash

1 新建一个项目如下

技术分享

其中index.html 页面如下

<html>
<head>
    <link rel="stylesheet" href="../styles/one.css?rev=@@hash">
    <link rel="stylesheet" href="../styles/two.css?rev=@@hash">
</head>
<body>
<script type="text/javascript" src="../scripts/one.js?rev=@@hash"></script>
<script type="text/javascript" src="../scripts/two.js?rev=@@hash"></script>
</body>
</html>

2 打开cmd 进入这个目录 执行  npm install 会自动生成这个文件夹 里面是所需要的文件

技术分享

 

3 新建gulpfile.js

var gulp=require(‘gulp‘),
    rev  = require(‘gulp-rev-append‘); // 给URL自动加上版本号
    clean=require(‘gulp-clean‘);//清理
//清理文件
gulp.task(‘clean‘, function() {
    gulp.src([‘dist‘], {read: false})
        .pipe(clean());
});
//css处理任务
gulp.task(‘mini-css‘,function(){
    gulp.src([‘app/styles/*.css‘])
        // .pipe(minifyCss())
        .pipe(gulp.dest(‘dist/css‘));
});
//js处理任务
gulp.task(‘mini-js‘,function(){
    gulp.src([‘app/scripts/*.js‘])
        // .pipe(uglify({
        //     //mangle: true,//类型:Boolean 默认:true 是否修改变量名
        //     mangle: false
        // }))
        .pipe(gulp.dest(‘dist/js‘));
});
//路径替换任务
gulp.task(‘rev‘,function(){
    gulp.src(‘app/pages/*.html‘)
        .pipe(rev())
        .pipe(gulp.dest(‘dist/html‘));
});

//图片处理,
// gulp.task(‘images‘, function() {
//     return gulp.src(‘src/img/**/*‘)
//         .pipe(gulp.dest(‘./dist/img‘));
// });
gulp.task(‘default‘,[‘clean‘,‘mini-css‘,‘mini-js‘,‘rev‘]);

4 执行命令行 gulp

第二种  在文件名后面l生成  css/login-8087742b66.css

技术分享

页面如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/login.css">
    <link rel="stylesheet" href="circle/index.css">
</head>
<body>
<script type="text/javascript" src="js/zepto.js"></script>
<script type="text/javascript" src="js/base.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/login.js"></script>
</body>
</html>

3 新建gulpfile.js

var gulp=require(‘gulp‘),
    concat=require(‘gulp-concat‘),//文件合并
    uglify=require(‘gulp-uglify‘),//js压缩
    // minifyCss=require(‘gulp-minify-css‘),//css压缩
    rev=require(‘gulp-rev‘),//对文件名加MD5后缀
    runSequence=require(‘run-sequence‘),
    clean=require(‘gulp-clean‘),//清理
    revCollector=require(‘gulp-rev-collector‘);//路径替换

//css处理任务
gulp.task(‘mini-css‘,function(){
   return gulp.src([‘./src/css/*.css‘])
        // .pipe(minifyCss())
        .pipe(rev())
        .pipe(gulp.dest(‘./dist/css‘))
        .pipe(rev.manifest())
        .pipe(gulp.dest(‘./rev/css‘));
});
//css处理任务
gulp.task(‘mini-css1‘,function(){
    return gulp.src([‘./src/circle/*.css‘])
        // .pipe(minifyCss())
        .pipe(rev())
        .pipe(gulp.dest(‘./dist/circle‘))
        .pipe(rev.manifest())
        .pipe(gulp.dest(‘./rev/circle‘));
});
//js处理任务
gulp.task(‘mini-js‘,function(){
    return gulp.src([‘./src/js/*.js‘])
        // .pipe(uglify({
        //     //mangle: true,//类型:Boolean 默认:true 是否修改变量名
        //     mangle: false
        // }))
        .pipe(rev())
        .pipe(gulp.dest(‘./dist/js‘))
        .pipe(rev.manifest())
        .pipe(gulp.dest(‘./rev/js‘));
});
//路径替换任务
gulp.task(‘rev‘,function(){
    return gulp.src([‘./rev/*/*json‘,‘./src/*.html‘])
        .pipe(revCollector())
        .pipe(gulp.dest(‘./dist‘));
});
gulp.task(‘rev1‘,function(){
    return gulp.src([‘./rev/*/*json‘,‘./src/circlehtml/*.html‘])
        .pipe(revCollector())
        .pipe(gulp.dest(‘./dist/circlehtml‘));
});
//清理文件
gulp.task(‘clean‘, function() {
    return gulp.src([‘./dist‘], {read: false})
        .pipe(clean());
});
//图片处理,
gulp.task(‘images‘, function() {
    return gulp.src(‘src/img/**/*‘)
        .pipe(gulp.dest(‘./dist/img‘));
});
// gulp.task(‘default‘,[‘clean‘,‘mini-css‘,‘mini-js‘,‘images‘,‘rev‘]);
gulp.task(‘default‘,function(){
    runSequence(
        ‘clean‘,
        ‘mini-css‘,
        ‘mini-css1‘,
        ‘mini-js‘,
        ‘images‘,
        ‘rev‘,
        ‘rev1‘
    );
});

4 执行命令行 gulp

技术分享

我就是在这里遇到的坑   

执行的时候怎么都生成不了下面的json文件     

技术分享

后来各种检查各种百度     原来是node版本太低    升级了之后在执行  成功了    简直了  

js版本控制之gulp

标签:处理   seq   str   nbsp   文件   打开   enc   我不知道   执行命令行   

原文地址:http://www.cnblogs.com/lyz4444/p/7544680.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!