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压缩构建代码的主要内容,如果未能解决你的问题,请参考以下文章