前端开发打包gulp使用案例分享

前端开发文档规范
前端开发文档实例
前端公众号开发文档
前端开发规范文档

分享自己的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
        .src([‘src/js/jquery-1.8.3.min.js’, ‘src/js/test-2.0.1.min.js’])
        .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
        .src([‘src/html/*.html’])
        .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
赞(0)
64K

评论 抢沙发

评论前必须登录!