Gulp脚本

incredible 发布于2019-08-26 12:01 / 2404人阅读

摘要：插件自动同步浏览器插件合并文件的插件压缩插件压缩插件压缩图片插件压缩图片的插件缓存插件，可以加快编译速度删除文件插件同步运行任务插件给属性添加浏览器前缀插件插件合成图片插件编译文件，添加属性浏览器前缀，浏览器自动更

var gulp = require("gulp");
// sass 插件

var sass = require("gulp-sass");

// 自动同步浏览器插件

var browserSync = require("browser-sync");

// 合并文件的插件

var useref = require("gulp-useref");

// 压缩js插件

var uglify = require("gulp-uglify");
var gulpIf = require("gulp-if");

// 压缩css插件

var cssnano = require("gulp-cssnano");

// 压缩图片插件

var imagemin = require("gulp-imagemin");

// 压缩png图片的插件

var pngquant = require("imagemin-pngquant");

// 缓存插件，可以加快编译速度

var cache = require("gulp-cache");

// 删除文件插件

var del = require("del");

// 同步运行任务插件

var runSequence = require("run-sequence");

// 给css3属性添加浏览器前缀插件

var autoprefixer = require("gulp-autoprefixer");
// sourcemap 插件
var sourcemaps = require("gulp-sourcemaps");
var lazypipe = require("lazypipe");

// 合成sprite图片插件

var spritesmith = require("gulp.spritesmith");
var imageminOptipng = require("imagemin-optipng");

// 编译sass文件，添加css3属性浏览器前缀，reload 浏览器

gulp.task("sass", function () {
 return gulp.src("./src/scss/**/*.scss")
     .pipe(sass())
     .pipe(autoprefixer())
     .pipe(gulp.dest("./src/css"))
     .pipe(browserSync.reload({stream: true}));
});

// 自动更新浏览器任务

gulp.task("browserSync", function () {
 browserSync.init({
     server: {
         baseDir: "src"
     }
 })
});

// 合并文件任务
// 在html设置需要合并的文件：
//
//
//
//
// 执行任务后，会编译成：
// 同时会把 flexible_css.js 和 flexible.js 合并成 flexible.min.js

gulp.task("useref", function () {
 return gulp.src("./src/*.html")
     .pipe(useref({}, lazypipe().pipe(sourcemaps.init, { loadMaps: true })))
     .pipe(gulpIf("*.js", uglify()))
     .pipe(gulpIf("*.css", cssnano()))
     .pipe(sourcemaps.write("maps"))
     .pipe(gulp.dest("dist"));
});

// 图片压缩任务

gulp.task("images", function () {
 return gulp.src("./src/img/**/*.+(png|jpg|gif|svg)")
     .pipe(imagemin({
         progressive: true,
         svgoPlugins: [{removeViewBox: false}],
         use: [pngquant()]
     }))
     .pipe(gulp.dest("dist/img"));
});

// 合并sprite图任务

gulp.task("sprite", function () {
 var spriteData = gulp.src("./src/img/sprite/**/*.png")
     .pipe(spritesmith({
         imgName: "sprite.png",
         cssName: "sprite.scss",
         imgPath: "../img/sprite/sprite.png",
         cssFormat: "scss",
         padding: 10
     }));
 return spriteData.pipe(gulp.dest("./src/img/sprite/"))
});

// 删除build目录

gulp.task("clean:dist", function () {
 return del.sync("dist");
});

// 清除缓存

gulp.task("cache:clear", function (cb) {
 return cache.clearAll(cb)
});

// 监控任务，当有sass文件，html文件，js文件改动的时候，刷新浏览器

gulp.task("watch", ["browserSync", "sass"], function () {
 gulp.watch("./src/scss/**/*.scss", ["sass"]);
 gulp.watch("./src/*.html", browserSync.reload);
 gulp.watch("./src/js/**/*.js", browserSync.reload);
});

// 构建最终输出文件

gulp.task("build", function (callback) {
 runSequence("clean:dist", ["sass", "useref", "images", "fonts"], callback);
});

// gulp 默认执行任务

gulp.task("default", function (callback) {
 runSequence(["sass", "browserSync", "watch"], callback);
});

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

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

前端开发中提到的“脚手架”到底指什么，CLI？gulp 和 gulp-cli有什么区别

摘要：一般来说，脚手架是帮你减少为减少重复性工作而做的重复性工作的工具和的区别可以看这个它跟前端常说的脚手架不是一个东西只是的缩写举个例子你要写一个项目，源语言为，用了后端是你每次完成一部分功能，你都要用把编译到编译压缩文件每次修改代码都要一般来说，脚手架是帮你减少「为减少重复性工作而做的重复性工作」的工具. gulp和gulp-cli的区别可以看这个task - what does gu...

shadajin 2019-08-23 12:20 评论0 收藏0
“流式”前端构建工具——gulp.js 简介

摘要：流式构建改变了底层的流程控制，大大提高了构建工作的效率和性能，给用户的直观感觉就是更快。我的看法关于流式构建，短短几句话无法讲清它的来龙去脉，但是在的世界里，确实是至关重要的。 Grunt 一直是前端领域构建工具（任务运行器或许更准确一些，因为前端构建只是此类工具的一部分用途）的王者，然而它也不是毫无缺陷的，近期风头正劲的 gulp.js 隐隐有取而代之的态势。那么，究竟是什么使得 g...

ShevaKuilin 2019-08-21 12:12 评论0 收藏0
Javascript 打包工具

摘要：所以，打包工具就出现了，它可以帮助做这些繁琐的工作。打包工具介绍仅介绍款主流的打包工具，，，，以发布时间为顺序。它定位是模块打包器，而属于构建工具。而且在其他的打包工具在处理非网页文件比如等基本还是需要借助它来实现。本文当时写在本地，发现换电脑很不是方便，在这里记录下。前端的打包工具打包工具可以更好的管理html，css，javascript，使用可以锦上添花，不使用也没关系...

Sleepy 2019-08-23 18:03 评论0 收藏0
用 Electron 打造 Win/Mac 应用，从「代码」到可下载的「安装包」，可能比你想得麻烦一

摘要：三配置环节目的一是为之后的环节初始化工作流参数，二是准备好应用文件夹内容即要打包的目标文件夹做的事解析命令行参数，初始化工作参数，填充配置文件，把配置文件和相关依赖文件导入到文件夹内合适的首发于酷家乐前端博客，作者@摘星（segmentfault @StinsonZhao）我们能从很多地方学习到怎么起一个 Electron 项目，有些还会介绍怎么打包或构建你的代码，但距离「真正地...

LdhAndroid 2019-08-21 17:30 评论0 收藏0
【译】使用 AngularJS 和 Electron 构建桌面应用

摘要：原文的框架以前叫做允许你使用和编写跨平台的桌面应用。这个教程向我们展示了如何使用和构建一个桌面应用。我们的应用看起来会是这个样子配置开发环境是微软的一款跨平台代码编辑器。是基于和微软自身的开发的。我们需要用我们最终构建的应用来替换它。原文：Creating Desktop Applications With AngularJS and GitHub Electron showImg(...

maxmin 2019-08-22 10:59 评论0 收藏0