前端开发打包gulp使用案例分享
摘要： 前端开发文档规范 前端开发文档实例 前端公众号开发文档 前端开发规范文档 分享自己的gulp案例，安装的插件实现了html css js 图片 的压缩，less的转译，本地服务开启，livereload等 github的仓库……
| 前端开发文档规范 |
| 前端开发文档实例 |
| 前端公众号开发文档 |
| 前端开发规范文档 |
分享自己的gulp案例，安装的插件实现了html css js 图片 的压缩，less的转译，本地服务开启，livereload等
github的仓库地址(https://github.com/danny5101/gulp-test.git)，供clone参考。
gulpfilejavascript 代码
var gulp = require(‘gulp’)
var del = require(‘del’)
var merge = require(‘gulp-merge’) // 合并多个stream返回一个stream
var htmlmin = require(‘gulp-htmlmin’)
var cleancss = require(‘gulp-clean-css’)
var lesstocss = require(‘gulp-less’)
var uglify = require(‘gulp-uglify’)
var imagemin = require(‘gulp-imagemin’)
var postcss = require(‘gulp-postcss’)
var autoprefixer = require(‘autoprefixer’)
var cssnext = require(‘cssnext’)
var precss = require(‘precss’)
var connect = require(‘gulp-connect’)
var proxy = require(‘http-proxy-middleware’)
// 清除目录文件-test
// gulp.task(‘clean:deleted’, function() {
// return del([
// ‘src/deleted/**/*’,
// ‘!src/deleted/evaluation.css’
// ])
// });
// 清除目录文件dist
gulp.task(‘clean:dist’, function() {
return del([‘dist’])
})
// 复制文件
gulp.task(‘copy:common’, [‘clean:dist’], function() {
return gulp.src(‘src/common/**/*’).pipe(gulp.dest(‘dist/src/common’))
})
gulp.task(‘copy:jslibs’, [‘clean:dist’], function() {
return gulp
.pipe(gulp.dest(‘dist/src/js’))
})
gulp.task(‘copy’, [‘copy:common’, ‘copy:jslibs’])
// 压缩html
gulp.task(‘htmlmin’, [‘clean:dist’], function() {
var options = {
removeComments: true, //清除html注释
collapseWhitespace: true, //压缩html##!!!慎用，会去除应保留的空格
collapseBooleanAttributes: true, //省略布尔属性的值 <input checked=”true”/> ==> <input />
removeEmptyAttributes: true, //删除所有空格作属性值 <input id=”” /> ==> <input />
removeScriptTypeAttributes: true, //删除<script>的type=”text/javascript”
removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type=”text/css”
minifyJS: true, //压缩页面JS
minifyCSS: true, //压缩页面css
}
return gulp
.pipe(htmlmin(options))
.pipe(gulp.dest(‘dist/src/html’))
})
// less转为css
gulp.task(‘lesstocss’, function() {
return gulp
.src([‘src/css/*.less’])
.pipe(lesstocss())
.pipe(gulp.dest(‘src/css’))
})
// css处理
gulp.task(‘css’, [‘clean:dist’, ‘lesstocss’], function() {
var processors = [autoprefixer, cssnext, precss]
var cssSream1 = gulp
.src([‘src/css/*.css’])
.pipe(postcss(processors))
.pipe(cleancss())
.pipe(gulp.dest(‘dist/src/css’))
return cssSream1
// 等同于上面的一段，a sample of merging stream
/*var cssSream1 = gulp.src(‘src/css/base.css’)
.pipe(postcss(processors))
.pipe(cleancss())
.pipe(gulp.dest(‘dist/src/css’));
var cssSream2 = gulp.src(‘src/css/evaluation.css’)
.pipe(postcss(processors))
.pipe(cleancss())
.pipe(gulp.dest(‘dist/src/css’));
var cssSream3 = gulp.src(‘src/css/evatest.css’)
.pipe(postcss(processors))
.pipe(cleancss())
.pipe(gulp.dest(‘dist/src/css’));
return merge(cssSream1, cssSream2, cssSream3);*/
})
// 压缩js
gulp.task(‘jsmin’, [‘clean:dist’], function() {
return gulp
.src([
‘src/js/**/*.js’,
‘!src/js/**/{jquery-1.8.3.min,test-2.0.1.min}.js’,
]) // **匹配src/js下的0个或多个子文件夹
.pipe(
uglify({
// 配置文档 https://github.com/mishoo/UglifyJS2#mangle-properties-options
mangle: true, // 类型：Boolean 默认：true 是否修改变量名
compress: true, // 类型：Boolean 默认：true 是否完全压缩
/*output: {
comments: true// (default false) — pass true or “all” to preserve all comments
}*/
}),
)
.pipe(gulp.dest(‘dist/src/js’))
})
// 压缩图片
gulp.task(‘imagemin’, [‘clean:dist’], function() {
return gulp
.src([‘src/image/*.{jpg,png,gif,ico}’])
.pipe(
imagemin({
optimizationLevel: 5, //类型：Number 默认：3 取值范围：0-7（优化等级）
progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
multipass: true, //类型：Boolean 默认：false 多次优化svg直到完全优化
}),
)
.pipe(gulp.dest(‘dist/src/image’))
})
// 开启本地服务
gulp.task(‘connect’, function() {
connect.server({
root: ‘.’,
livereload: true,
middleware: function(connect, opt) {
return [
/*function cors(req, res, next) {
res.setHeader(‘Access-Control-Allow-Origin’, ‘*’)
res.setHeader(‘Access-Control-Allow-Methods’, ‘*’)
next()
}*/
proxy(‘/lincombFront’, {
target: ‘http://172.16.105.223:8003’,
changeOrigin: true,
}),
]
},
})
})
// reload
gulp.task(‘htmlLive’, function() {
gulp.src([‘src/html/*.html’]).pipe(connect.reload())
})
gulp.task(‘cssLive’, function() {
gulp.src([‘src/css/*.css’]).pipe(connect.reload())
})
gulp.task(‘jsLive’, function() {
gulp.src([
‘src/js/**/*.js’,
‘!src/js/**/{jquery-1.8.3.min,test-2.0.1.min}.js’,
]).pipe(connect.reload())
})
gulp.task(‘imageLive’, function() {
gulp.src([‘src/image/*.{jpg,png,gif,ico}’]).pipe(connect.reload())
})
gulp.task(‘watch’, function() {
gulp.watch([‘src/html/*.html’], [‘htmlLive’])
gulp.watch([‘src/css/*.less’], [‘lesstocss’]) // less实时编译
gulp.watch([‘src/css/*.css’], [‘cssLive’])
gulp.watch(
[‘src/js/**/*.js’, ‘!src/js/**/{jquery-1.8.3.min,test-2.0.1.min}.js’],
[‘jsLive’],
)
gulp.watch([‘src/image/*.{jpg,png,gif,ico}’], [‘imageLive’])
})
gulp.task(‘default’, [‘connect’, ‘watch’])
gulp.task(‘minAll’, [‘copy’, ‘htmlmin’, ‘css’, ‘jsmin’, ‘imagemin’])
.js
package.json
json 代码
{
“name”: “gulp-test”,
“version”: “1.0.0”,
“description”: “demo of learning gulp”,
“main”: “index.js”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″
},
“author”: “”,
“license”: “ISC”,
“devDependencies”: {
“autoprefixer”: “^7.1.6”,
“cssnext”: “^1.8.4”,
“del”: “^3.0.0”,
“gulp”: “^3.9.1”,
“gulp-clean-css”: “^3.9.0”,
“gulp-connect”: “^5.0.0”,
“gulp-htmlmin”: “^3.0.0”,
“gulp-imagemin”: “^3.4.0”,
“gulp-less”: “^3.3.2”,
“gulp-merge”: “^0.1.1”,
“gulp-postcss”: “^7.0.0”,
“gulp-uglify”: “^3.0.0”,
“http-proxy-middleware”: “^0.17.4”,
“precss”: “^2.0.0”
}
}
| 前端开发文档mdn |
| web前端开发的未来文档 |
| web前端开发现状文档 |
| 关于前端开发的文档 |
| 产品文档和原型图前端开发 |
» 本文来自：前端开发者 » 《前端开发打包gulp使用案例分享》
» 本文链接地址：https://www.rokub.com/6731.html
» 您也可以订阅本站：https://www.rokub.com
近期评论