构建WEB前端开发环境

来源：互联网发布：网络女主播真的漂亮吗编辑：程序博客网时间：2024/05/16 07:52

构建WEB前端开发环境（一）

vargulp = require('gulp');
varless = require('gulp-less');
varplugins = require('gulp-load-plugins')();
varpngquant = require('imagemin-pngquant');

gulp.task('default',function(){
    gulp.src('less/zhanzhao.less').pipe(less()).pipe(gulp.dest('css/'));
    gulp.src('less/liuqian.less').pipe(less()).pipe(gulp.dest('css/'));
    gulp.src('less/student.less').pipe(less()).pipe(gulp.dest('css/'));
    returngulp.src('less/company.less').pipe(less()).pipe(gulp.dest('css/'));
});

gulp.task('clean',function(){
    returngulp.src('publish/').pipe(plugins.clean());
});

gulp.task('bulid',['clean'],function(){
  gulp.src('favicon.ico').pipe(gulp.dest('publish/'));
    gulp.src('download/**/*').pipe(gulp.dest('publish/download/'));
    gulp.src('mail/**/*').pipe(gulp.dest('publish/mail/'));
    gulp.src('statement/**/*').pipe(gulp.dest('publish/statement/'));
    gulp.src('template/**/*').pipe(gulp.dest('publish/template/'));
  gulp.src('css/**/*.css').pipe(plugins.minifyCss()).pipe(gulp.dest('publish/css/'));
    gulp.src('scripts/**/*.js').pipe(plugins.uglify()).pipe(gulp.dest('publish/scripts/'));
  returngulp.src('images/**/*').pipe(plugins.cache(plugins.imagemin({
            optimizationLevel:5,
            progressive:true,
            svgoPlugins:[{removeViewBox:false}],
            use:[pngquant()]
        }))).pipe(gulp.dest('publish/images/'));
});

gulp.task("revision",['bulid'],function(){
  gulp.src(['template/head-js.html','template/baidu.html']).pipe(plugins.concat('head-js.html')).pipe(gulp.dest('publish/template/'));

  returngulp.src(['publish/css/*.css','publish/scripts/config.js','publish/images/**/*'],{base:'publish'})
        .pipe(plugins.rev())
        .pipe(gulp.dest('publish/'))
        .pipe(plugins.rev.manifest({
          merge:true
        }))
        .pipe(gulp.dest('publish/'));
});

gulp.task("publish",["revision"],function(){
  varmanifestCss = gulp.src("publish/rev-manifest.json"),
      manifestDownload = gulp.src("publish/rev-manifest.json"),
      manifest = gulp.src("publish/rev-manifest.json");

  gulp.src('publish/css/*.css')
    .pipe(plugins.revReplace({manifest:manifest}))
    .pipe(gulp.dest('publish/css/'));
  gulp.src('*.html')
    .pipe(plugins.revReplace({manifest:manifestCss}))
    .pipe(gulp.dest('publish/'));

  gulp.src('publish/download/*.html')
    .pipe(plugins.revReplace({manifest:manifestDownload}))
    .pipe(gulp.dest('publish/download/'));
});

作用：

default，主要是监听less变化生成css。
clean，清除掉publish文件夹的内容
bulid，把源码移动到publish文件夹下面，对于一些类型的文件做处理，例如css的压缩，js的压缩，图片的压缩缓存等等。
revision，md5文件，根据html，css的引用来给相关的文件添加md5戳，生成新的md5戳文件，来保持文件更新。
publish，根据上面 revision生成的新的md5文件来做一次文件替换，替换里面js，css，image的引用路径。

参考：segmentfault.com/a/1190000006157372

0 0