js版本控制之gulp

微信浏览器有严重的缓存问题，所以在网上百度了一下发现好多关于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版本太低升级了之后在执行成功了简直了

转载于:https://www.cnblogs.com/lyz4444/p/7544680.html

posted @ 2021-06-02 11:38 如若菇凉阅读(94) 评论(0) 收藏举报

刷新页面返回顶部

如若菇凉

js版本控制之gulp

公告