gulp 使用案例

svtter 发布于2019-08-26 11:43 / 3384人阅读

摘要：使用案例引入检测文件模块引入压缩模块引入合并文件模块引入压缩模块引入压缩的模块引入压缩图片插件代码来转换中的样式自动加上浏览器前缀解决方案设计稿宽，那么，即代码中写编译后转化成静态服务器处理文件检测压缩合并文件

gulp 使用案例

var gulp = require("gulp");
var jshint = require("gulp-jshint"); // 引入检测js文件模块
var uglify = require("gulp-uglify"); // 引入js压缩模块
var concat = require("gulp-concat"); // 引入合并文件模块
var minhtml = require("gulp-minify-html"); // 引入html压缩模块
var minify = require("gulp-minify-css"); // 引入压缩css的模块
var imagemin = require("gulp-imagemin"); // 引入压缩图片插件
var postcss = require("gulp-postcss"); //JavaScript 代码来转换CSS 中的样式
var autoprefixer = require("autoprefixer"); //自动加上浏览器前缀
var postcsswritesvg = require("postcss-write-svg") // 解决1px方案

// UI设计稿750px宽，那么100vw = 750px，即1vw = 7.5px
var pxtoviewport = require("postcss-px-to-viewport"); // 代码中写px编译后转化成vm

var browserSync = require("browser-sync")
var opn = require("opn")
//静态服务器

// 1.处理js文件
gulp.task("js", function () {
    return gulp.src("js/*.js")
        .pipe(jshint()) //检测js
        .pipe(uglify()) //压缩js
        .pipe(concat("index.js")) //合并js文件并命名为"index.js"
        .pipe(gulp.dest("build/js")); //将合并后的js文件输出到build文件夹下      
});

// 2.处理css
gulp.task("css", function () {
    var processors = [
        pxtoviewport({
            viewportWidth: 750,
            viewportHeight: 1334,
            unitPrecision: 5,
            viewportUnit: "vw",
            selectorBlackList: [],
            minPixelValue: 1,
            mediaQuery: false
        })
    ];
    return gulp.src("css/*.css") // 指定css文件夹下的所有后缀为.css的文件
        .pipe(postcss([ autoprefixer() ]))  //自动加上浏览器前缀
        .pipe(postcss(processors))
        //.pipe(minify()) //使用minify模块进行css 压缩
        .pipe(gulp.dest("build/css")) // 最终将压缩的文件输出到minicss文件下            
})

// 3.压缩img
gulp.task("img", function () {
    gulp.src("images/*.{png,jpg,gif,ico}")
        .pipe(imagemin({
            progressive: true, //Boolean类型 默认:false 无损压缩图片
            optimizationLevel: 5, //number类型 默认:3 取值范围:0-7(优化等级)
            interlced: true, //Boolean类型 默认false 隔行扫描gif进行渲染
            multipass: true //Boolean类型 默认false 多次优化svg直到完全优化
        }))
        .pipe(gulp.dest("build/images")) //输入到build文件夹下的images文件夹下 
})

// 4.压缩html
gulp.task("html", function () {
    gulp.src("*.html") //指定当前文件夹下的所有html文件
        .pipe(minhtml()) //进行压缩
        .pipe(gulp.dest("build")) //将压缩后的文件输出到build文件夹下
        .pipe(browserSync.stream()); //自动打开浏览器

})

// 定义path
var path = {
    css: "./css/*.css",
    js: "./js/*.js",
    html: "./*.html",
    src: "./build"    
};

// 命令行输入gulp或者 gulp default的时候就会执行
gulp.task("default", function(){
    //把任务串联起来
    gulp.start("js", "css", "img", "html");

    //打开静态服务器
    browserSync.init({
        server:{
            baseDir: path.src
        },
        port:3000,
        open:false
    }, function(){
        var homepage = "http://localhost:3000/";
        opn(homepage);
    });

    //监听文件的变化实时编译 然后刷新
    gulp.watch([path.html, path.js, path.css]).on("change", function() {
        gulp.start("js", "css", "img", "html");        
        browserSync.reload();
    });
});

参考文章

超融合服务器混合云 json使用案例数据分析使用案例 webrtc带宽检测demo使用案例 gulp

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107448.html

使用gulp+browser-sync搭建Sass自动化编译以及自动刷新所需要的插件

使用gulp+browser-sync搭建Sass自动化编译以及自动刷新所需要的插件按照gulp需求插件安装browser-sync（在命令行中输入） npm install --save-dev browser-sync 如果网速比较慢，可以用下面的cnpm命令运行： cnpm install --save-dev browser-sync 下面列一些安装其它的插件，如需用到可以...

defcon 2019-08-26 11:50 评论0 收藏0
gulp插件解决浏览器缓存问题

摘要：以及列出的是本妹子最常用的插件，小伙伴们可以参考。案例地址二解决浏览器缓存问题为静态文件添加唯一值，如。我们主要是用将转换成可以在浏览器中运行的代码。合并文件相关预处理器。一、前言有些简单前端小项目，不需要涉及框架，前端打包压缩的话本妹子还是喜欢用gulp。本文将用gulp-rev和gulp-rev-rewrite解决cdn缓存问题。以及列出的是本妹子最常用的gulp插件，小伙伴们...

TwIStOy 2019-08-26 13:40 评论0 收藏0
精读《如何编译前端项目与组件》

摘要：历史上由于是作为的替代品出现，当时要解决的问题是处理浏览器兼容问题，打包或，做一些公共资源替换，雪碧图等，最后可以顺带合并到一个文件，但模块化功能远远比弱，基本上只能合并，但不能理解模块概念。 1 引言说到前端编译方案，也就是如何打包项目，如何编译组件，可选方案有很多，比如：通过 webpack / parcel / gulp 构建项目。通过 parcel / gulp / b...

jiekechoo 2019-08-23 14:52 评论0 收藏0
Gulp入门教程

摘要：本教程分为两个部分先讲解的使用及参数说明，后以一个实际项目案例作为演练。或自动监视文件变化并执行指定的任务。项目代码下载其他文献官方接口文档很多演示项目代码其它教程文章 Gulp介绍 Gulp是一个前端开发的自动化构建工具。前端开发往往需要把LESS/SCSS文件进行编译成CSS文件，JavaScript多文件合并成一个文件并压缩以及一些其他需要重复性操作的工作。而Gulp就是通过简单...

levius 2019-08-19 17:21 评论0 收藏0
前端模块化的那些事儿

摘要：规范异步模块声明规范公共模块声明模块化的核心价值模块化最核心的价值在于解决不同文件之间的分工和调用问题，即依赖关系。一、什么是模块？定义：具有相同属性和行为的事物的集合在前端中：将一些属性比较类似和行为比较类似的内容放在同一个js文件里面，把这个js文件称为模块目的：为了每个js文件只关注与自身有关的事情，让每个js文件各行其职二、什么是模块化？CommonJS是什么？AMD和C...

aaron 2019-08-20 12:11 评论0 收藏0