gulp压缩构建代码

Posted 明天后浪

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了gulp压缩构建代码相关的知识,希望对你有一定的参考价值。

// 获取 gulp
var gulp = require(‘gulp‘);
// 获取 uglify 模块(用于压缩 JS)
var uglify = require(‘gulp-uglify‘);
// 获取 htmlminify 模块(用于压缩 html)
var htmlminify = require("gulp-html-minify");
// 获取 minify-css 模块(用于压缩 CSS)
var minifyCSS = require(‘gulp-minify-css‘);
// 版本号
var assetRev = require(‘gulp-asset-rev‘);

var exec = require(‘child_process‘).exec;
// 压缩 js 文件
// 在命令行使用 gulp script 启动此任务
gulp.task(‘script‘, function() {
       gulp.src(‘develop/jingcai/js/controller/*.js‘)
              .pipe(assetRev())
              .pipe(uglify())
              .pipe(gulp.dest(‘src/jingcai/js/controller‘));
       gulp.src(‘develop/renren/js/controller/*.js‘)
              .pipe(assetRev())
              .pipe(uglify())
              .pipe(gulp.dest(‘src/renren/js/controller‘));
       gulp.src(‘develop/libjs/etc/*.js‘)
              .pipe(assetRev())
              .pipe(uglify())
              .pipe(gulp.dest(‘src/libjs/etc‘));
       gulp.src(‘develop/libjs/lib/*.js‘)
              .pipe(assetRev())
              .pipe(uglify())
              .pipe(gulp.dest(‘src/libjs/lib‘));
       gulp.src(‘develop/libjs/service/*.js‘)
              .pipe(assetRev())
              .pipe(uglify())
              .pipe(gulp.dest(‘src/libjs/service‘));
});
// 压缩 html 文件
gulp.task(‘html‘, [‘script‘], function() {
       gulp.src("develop/jingcai/c2c/*.html")
              .pipe(assetRev())
              .pipe(htmlminify())
              .pipe(gulp.dest("src/jingcai/c2c"));
       gulp.src("develop/renren/views/*.html")
              .pipe(assetRev())
              .pipe(htmlminify())
              .pipe(gulp.dest("src/renren/views"));
       gulp.src("develop/jingcai/userCenter/*.html")
              .pipe(assetRev())
              .pipe(htmlminify())
              .pipe(gulp.dest("src/jingcai/userCenter"));
       gulp.src("develop/jingcai/doc/*.html")
              .pipe(assetRev())
              .pipe(htmlminify())
              .pipe(gulp.dest("src/jingcai/doc"));
       gulp.src("develop/renren/doc/*.html")
              .pipe(assetRev())
              .pipe(htmlminify())
              .pipe(gulp.dest("src/renren/doc"));
       gulp.src("develop/*.html")
              .pipe(assetRev())
              .pipe(htmlminify())
              .pipe(gulp.dest("src"));
});
// 压缩 css 文件
gulp.task(‘css‘, [‘html‘], function() {
       gulp.src(‘develop/style/*.css‘)
              .pipe(assetRev())
              .pipe(minifyCSS())
              .pipe(gulp.dest(‘src/style‘));

});
// cp image
gulp.task(‘mvImgageDir‘, [‘css‘], function(cb) {
       exec(‘mkdir src;cd src;mkdir images;mkdir activity‘, function(err) {
              if (err) {
                     console.log(‘图片文件夹创建失败‘);
                     exec(‘cp develop/images/* src/images‘, function(err) {
                            if (err) {
                                   console.log(err);
                            } else {
                                   console.log(‘图片文件夹移动完毕‘)
                                   cb();
                            }
                     });
              } else {
                     console.log(‘图片文件夹创建完毕‘);
                     exec(‘cp develop/images/* src/images‘, function(err) {
                            if (err) {
                                   console.log(err);
                            } else {
                                   console.log(‘图片文件夹移动完毕‘);
                                   cb();
                            }
                     });
              }
       });
});
//cp activity
gulp.task(‘cpActivity‘, [‘mvImgageDir‘], function() {
       return gulp.src([‘./develop/activity/**/*‘])
              .pipe(gulp.dest(‘./src/activity‘));
})
gulp.task(‘default‘, [‘cpActivity‘]);

  

 

 

 

gulp-asset-rev

node-models  目录下 gulp-asset-rev 目录下 index.js 

// 默认格式是style-323923.css
// var verStr = (options.verConnecter || "-") + md5;
// src = src.replace(verStr, ‘‘).replace(/(\.[^\.]+)$/, verStr + "$1");

// 新增改变gulp格式问题style?v=xxx
var verStr = (options.verConnecter || "") + md5;
src = src + "?v=" + verStr;

 

pakeage.json   

{
  "name": "wap_betting",
  "version": "1.0.0",
  "description": "Betting web application with VueJS",
  "scripts": {
    "start": "node src/node_modules/http-server/bin/http-server -o"
  },
  "keywords": [],
  "repository": {
    "type": "git",
    "url": "git+ssh://[email protected]/caiqr/webLottery.git"
  },
  "author": "CaiqrWebFront",
  "dependencies": {
    "forever": "^0.15.2",
    "gulp": "^3.9.1",
    "gulp-html-minify": "0.0.14",
    "gulp-minify-css": "^1.2.4",
    "gulp-uglify": "^2.0.0"
  },
  "bugs": {
    "url": "https://github.com/caiqr/webLottery/issues"
  },
  "homepage": "https://github.com/caiqr/webLottery#readme",
  "main": "gulpfile.js",
  "devDependencies": {
    "gulp-asset-rev": "0.0.15"
  },
  "license": "ISC"
}

  

以上是关于gulp压缩构建代码的主要内容,如果未能解决你的问题,请参考以下文章

gulp自动化构建项目过程

Gulp压缩jscssimghtml提高页面打开速度

使用 gulp 构建一个项目

Gulp构建前端自动化工作流

用gulp加速前端开发

gulp是什么?