2019年Gulp自动化压缩合并构建的解决方案 about blog HOT 22 OPEN

对于图片这种静态资源发布到cdn的话，是不是也要生成md5指纹呢？

from blog.

@2lei 是啊，不然的话你图片更改之后，在页面访问一直是访问到缓存的未改之前的图片

from blog.

@lin-xin 你好 这个 gulpfile.js 可以完善一下吗？

from blog.

@vincent-cong 这个哪里有问题吗？

from blog.

@lin-xin 打包完了 并没有dist文件夹。。。。这个是什么原因？这个你可以出一个案列吗？非常感谢。

from blog.

@vincent-cong 像上面涉及到的路径，你要按照你实际项目的路径修改一下

from blog.

@lin-xin
var jsFilter = filter('src/js/.js',{restore:true}),
cssFilter = filter('src/js/.css',{restore:true}),
htmlFilter = filter(['src/.html'],{restore:true});
gulp.src('src/.html')
加过了，也没用。。。你可以自己试试看

我的文件目录是 src --js --aa.js src --css-aa.css src --aa.html
*.js *.css *.html 星号都是有的

from blog.

@vincent-cong 我没有你的文件我怎么试呢，我这边是没问题的哦

from blog.

@lin-xin 好吧 你那是好的，那估计是我的目录不对。。。我再按照你上面的目录弄一下吧，灰常感谢。如果方便的话可以加个例子么？

from blog.

怎么html压缩 语句不起作用啊？

from blog.

@dumuchenglin123 压缩的代码你注释掉了。用了 gulpif( ) 你的condition ，你有定义吗？condition 为true时才会执行后面的压缩。

from blog.

@lin-xin 为什么要进行文件过滤呢？

from blog.

@MagicHacker
因为 gulp.src('/*.html') 源文件是针对 html 的，所以过滤出这个html里面引用的js和css进行操作

from blog.

@lin-xin ok，明白了，谢谢。没注意到路径是/*.html的。我刚用这个东西不久，平时都是单独定义任务的。

from blog.

gulp.task('test', function () {
    var jsFilter = filter(['src/js/**/*.js', '!src/js/libs/**/*.js'],{restore:true}),
        cssFilter = filter('src/css/**/*.css',{restore:true}),
        htmlFilter = filter(['src/html/**/*.html'],{restore:true});
    gulp.src('src/html/**/*.html')
        .pipe(useref())                         // 解析html中的构建块
        .pipe(jsFilter)                         // 过滤所有js
        .pipe(uglify())                         // 压缩js
        .pipe(jsFilter.restore)
        .pipe(cssFilter)                        // 过滤所有css
        .pipe(minifycss())                           // 压缩优化css
        .pipe(cssFilter.restore)
        .pipe(RevAll.revision({                 // 生成版本号
            dontRenameFile: ['.html'],          // 不给 html 文件添加版本号
            dontUpdateReference: ['.html']      // 不给文件里链接的html加版本号
        }))
        .pipe(htmlFilter)                       // 过滤所有html
        .pipe(htmlmini())                       // 压缩html
        .pipe(htmlFilter.restore)
        .pipe(gulp.dest('dist/'))
})

为什么我过滤所有js之后，后面进行压缩，好像没有执行这个操作？大神，帮我看看哪里写错了

from blog.

@Pulset html里有没有加上 < ! -- build:css xxx --> < ! -- endbuild -->

from blog.

@lin-xin 加上了，js、css也能合并之后输出，但是都没有压缩

from blog.

@Pulset 那是不是忘了安装 gulp-uglify 等压缩插件还是引入的出了问题

from blog.

@lin-xin 原来是路径问题，改成这样就行了

var jsFilter = filter('**/*.js', { restore: true }),
  cssFilter = filter('**/*.css', { restore: true }),
  htmlFilter = filter('**/*.htm', { restore: true });

from blog.

请问博主，针对多页面有什么好的解决方案吗，除了index.html 我还有htm/**/*.html等页面 自动化压缩打版本加hash自动替换，有什么好的解决方法吗

from blog.

@BiYuqi 多页面也适合用这个方案的

from blog.

那页面中的图片该怎么处理勒？

from blog.