0
点赞
收藏
分享

微信扫一扫

gulp使用指南


gulp使用指南_gulp

4.index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body>
<input type="button" id="button1" value="Click">
<script src="js/index.js" ></script>
</body>
</html>

5.index.js

$(function () {
$('#button1').click(function () {
alert('button1');
});
});

6.config.js

var src = '../src';
var dest = '../dist';
var config = {
js: {
src: src + "/js/**/*",
dest: dest + "/js",
rev: dest + "/rev/js"
},
rev:{
revJson: dest + "/rev/**/*.json",
src: src + "/*.html",
dest: dest
}
}
module.exports = config;

7.gulpfile.js

var gulp = require('gulp');

//使用gulp-uglify压缩javascript文件,减小文件大小。http://www.ydcss.com/archives/54
var uglify = require('gulp-uglify');

//根据静态资源内容,生成md5签名,打包出来的文件名会加上md5签名,同时生成一个json用来保存文件名路径对应
var rev = require('gulp-rev');


//优雅的异步处理任务。https://www.npmjs.com/package/gulp-sync
var gulpsync = require('gulp-sync')(gulp);

var config = require('./config').js;
var configRev = require('./config').rev;


gulp.task('js', function() {
return gulp.src(config.src)
.pipe(uglify({mangle: false, compress: {properties: false}, output: {quote_keys: true}}))
.pipe(rev())
.pipe(gulp.dest(config.dest))
.pipe(rev.manifest())
.pipe(gulp.dest(config.rev));
});

gulp.task('rev', function () {
return gulp.src([configRev.revJson, configRev.src])
.pipe(revCollector({replaceReved: true,}))
.pipe(gulp.dest(configRev.dest) );
});

gulp.task('default',gulpsync.sync(['js', 'rev']),function () {

});

8.packgae.json

{
"name": "demo",
"description": "member-frontend",
"license": "ISC",
"repository": {
"type": "git",
"url": "git+ssh://git@github.com/npm/npm.git"
},
"devDependencies": {
"cheerio": "^1.0.0-rc.1",
"gulp": "^3.9.1",
"gulp-changed": "^1.3.2",
"gulp-clean": "^0.3.2",
"gulp-concat": "^2.6.0",
"gulp-html-replace": "^1.6.2",
"gulp-if": "^2.0.1",
"gulp-minify-css": "^1.2.4",
"gulp-rename": "^1.2.2",
"gulp-rev": "^7.1.2",
"gulp-rev-collector": "^1.0.5",
"gulp-sync": "^0.1.4",
"gulp-uglify": "^2.0.0",
"map-stream": "0.0.7",
"minimist": "^1.2.0",
"vinyl-fs": "2.4.4"
},
"bugs": {
"url": "https://github.com/npm/npm/issues"
},
"homepage": "https://github.com/npm/npm#readme",
"version": "1.0.0",
"main": "gulpfile.js",
"dependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "xutongbao"
}

9.压缩后的index.js

$(function(){$("#button1").click(function(){alert("button1")})});

10.遍历所有html,替换文件命名后的效果

gulp使用指南_js工程化_02


举报

相关推荐

0 条评论