gulp 使用案例
1、gulp 配置:
// 引入 gulp
var gulp = require('gulp'); var watch = require('gulp-watch'), //导入所有gulp需要的模块
spriter = require('gulp-css-spriter'),
spritesmith = require('gulp.spritesmith'),
imagemin = require('gulp-imagemin'),
pngquant = require("imagemin-pngquant"),
base64 = require('gulp-base64'),
autoprefixer = require('gulp-autoprefixer'),
rename = require("gulp-rename"),
cssmin = require('gulp-cssmin'),
connect = require('gulp-connect'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
less = require('gulp-less'),
sass = require('gulp-sass'),
uncss = require('gulp-uncss-sp'),
del = require('del'),
watchFile = (w_path, w_task) => {
var chokidar = require('chokidar');
chokidar.watch(w_path, { ignored: /[\/\\]\./ }).on('all', (event, path) => {
console.log(event, path, 'info');
if (w_task == 'scss' && event == 'unlink') {
del(['./css/*.css'])
}
gulp.run(w_task);
});
}; gulp.task('server', function() { //创建server
connect.server({
root: './',
port: 8088,
livereload: true
});
}); // 编译Sass
gulp.task('scss', function() { //创建任务
gulp.src(['./scss/*.scss'])
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 6 Chrome versions', 'last 3 Safari versions', 'iOS >= 5', 'Android >= 4.0'],
cascade: true, //是否美化属性值 默认:true 像这样:
//-webkit-transform: rotate(45deg);
// transform: rotate(45deg);
remove: true //是否去掉不必要的前缀 默认:true
}))
.pipe(cssmin())
.pipe(gulp.dest('./css'))
.pipe(connect.reload());
}); gulp.task('less', function() {
gulp.src(['./less/*.less'])
.pipe(less())
.pipe(autoprefixer({
browsers: ['last 6 Chrome versions', 'last 4 Explorer versions', 'Firefox ESR', 'last 2 Explorer versions', 'iOS >= 5', 'Android >= 4.0', '> 5%'],
cascade: true, //是否美化属性值 默认:true 像这样:
//-webkit-transform: rotate(45deg);
// transform: rotate(45deg);
remove: true //是否去掉不必要的前缀 默认:true
}))
.pipe(cssmin())
.pipe(gulp.dest('./css'))
.pipe(connect.reload());
}); gulp.task('uncss', function() {
return gulp.src('css/*.css')
.pipe(uncss({
html: ['*.html']
}))
.pipe(gulp.dest('./css'));
}); gulp.task('cssmin', function() {
gulp.src(['./css/*.css'])
.pipe(cssmin())
.pipe(gulp.dest('./css'));
}); // 监听任务
gulp.task('watch', function() {
/* gulp.watch('*.html', ['html']); */ // 监听根目录下所有.html文件
gulp.watch('./scss/*.scss', ['scss']);
});
gulp.task('watchIcon', function() {
watchFile('./img/icon/', 'icon2')
});
gulp.task('watchScss', function() {
watchFile('./scss/', 'scss')
}); // 默认任务
gulp.task('default', ['server', 'watchIcon', 'watchScss']); gulp.task('sprite', function() { var timestamp = +new Date();
//需要自动合并雪碧图的样式文件
return gulp.src('./scss/*.scss')
.pipe(spriter({
// 生成的spriter的位置
'spriteSheet': './img/' + timestamp + '.png',
// 生成样式文件图片引用地址的路径
// 如下将生产:backgound:url(../images/sprite20324232.png)
'pathToSpriteSheetFromCSS': '../img/' + timestamp + '.png'
}))
//产出路径
.pipe(gulp.dest('./test'));
}); gulp.task('icon2', function() {
return gulp.src('./img/icon/*.png') //需要合并的图片地址
.pipe(spritesmith({
imgName: 'img/sprite.png', //保存合并后图片的地址
cssName: 'scss/comm/icon.scss', //保存合并后对于css样式的地址
padding: 20, //合并时两个图片的间距
algorithm: 'binary-tree', //注释1
cssTemplate: function(data) {
var arr = [];
data.sprites.forEach(function(sprite) {
var $width = parseInt(sprite.px.width);
var $height = parseInt(sprite.px.height);
var $ofx = parseInt(sprite.px.offset_x);
var $ofy = parseInt(sprite.px.offset_y);
var $tw = sprite.total_width;
var $th = sprite.total_height;
arr.push(".icon-" + sprite.name +
"{" +
"background-image: url(" + sprite.escaped_image + ");" +
"background-position: " + $ofx + "px " + $ofy + "px;" +
"width:" + $width + "px;" +
"height:" + $height + "px;" +
"background-size:" + $tw + "px " + $th + "px;" +
"background-repeat:" + "no-repeat;" +
"display:" + "inline-block;" +
"}\n");
});
return arr.join("");
}
}))
.pipe(gulp.dest('./'));
});
gulp.task('imagemin', function() {
return gulp.src('./img/ft/*.{png,jpg,gif,ico}')
.pipe(imagemin({
optimizationLevel: 5,
progressive: true,
multipass: true,
use: [pngquant({
quality: '50-70'
})]
}))
.pipe(gulp.dest('./img/'))
}); gulp.task('base', ['sass'], function() {
return gulp.src('./scss/_reset.scss')
.pipe(base64({
baseDir: 'xgou',
extensions: ['png'],
maxImageSize: 20 * 1024,
debug: false
}))
.pipe(gulp.dest('./scss/'));
});
2、package.json:
{
"devDependencies": {
"del": "^2.2.2",
"gulp": "^3.9.1",
"gulp-autoprefixer": "*",
"gulp-base64": "*",
"gulp-concat": "*",
"gulp-connect": "*",
"gulp-css-spriter": "*",
"gulp-cssmin": "*",
"gulp-imagemin": "*",
"gulp-less": "*",
"gulp-livereload": "*",
"gulp-rename": "*",
"gulp-sass": "*",
"gulp-uglify": "*",
"gulp-uncss-sp": "^0.0.1",
"gulp-watch": "*",
"gulp-webserver": "*",
"gulp.spritesmith": "*",
"imagemin-pngquant": "*",
"node-sass": "*",
"spritesmith": "*"
}
}
gulp 使用案例的更多相关文章
- gulp初探
很多人都在用grunt和gulp,我现在连github都不用..为了说自己是个前端,还是搞搞gulp吧 nodejs很多人都会安装,这个不是问题 npm模块现在好像是自带的..我忘了.. 先全局安装下 ...
- gulp 编译es6 react 教程 案例 配置
1.gulp基本配置: var gulp = require('gulp'), watch = require('gulp-watch'), babel = require('gulp-babel') ...
- Yeoman 官网教学案例:使用 Yeoman 构建 WebApp
STEP 1:设置开发环境 与yeoman的所有交互都是通过命令行.Mac系统使用terminal.app,Linux系统使用shell,windows系统可以使用cmder/PowerShell/c ...
- gulp使用技巧-删除node_modules文件夹,解决目录层次太深删除报错的问题
问题描述: 在使用gulp当中,自动生成的node_modules文件夹,因为文件目录层级太深,无法系统删除,用360粉碎工具也报错 解决方法: 使用npm中的插件rimraf,专门用于删除的模块插件 ...
- gulp基本介绍
一.gulp是什么 gulp就是用来机械化的完成重复性质(如less->css:js.css压缩:js混淆)的工作:gulp的机制就是将重复工作抽象成一个个的任务. 二.gulp使用 a.首先确 ...
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...
- gulp之静态资源防缓存处理
最近,因为校友网项目开始有些规模了.开始就要考虑对静态资源进行工程自动化的管理.一讲到前端的自动化工具,大家或许都会想到Grunt,Gulp,或者百度的FIS.这三个都有各自的特点,大家可以依据自己的 ...
- gulp分享文档
Grunt--I/O操作: 读取A → A.a() → 写出A → 读取A → A.b() → 写出A; gulp--数据流:读取A → A.a() → A.b() → 写出A. Part① 构建gu ...
- Gulp安装流程、使用方法及cmd常用命令导览
Gulp安装流程.使用方法及CMD常用命令导览 来自前端小白的gulp及周边知识学习总结 一.名词介绍: Npm--node包管理工具 一开始我不理解,包管理工具是什么鬼.后来用到的gulp也好,gu ...
随机推荐
- yaml,json,ini这三种格式用来做配置文件优缺点
适合人类编写:ini > toml > yaml > json > xml > plist可以存储的数据复杂度:xml > yaml > toml ~ jso ...
- B/S和C/S结构的区别
概念: C/S结构,即Client/Server(客户机/服务器)结构,是大家熟知的软件系统体系结构,通过将任务合理分配到Client端和Server端,降低了系统的通讯开销,可以充分利用两端硬件环境 ...
- jQuery模态框实现 后台添加删除修改Ip端口
主要用到,$('#i1').each(),标签里绑定函数可传参数this <!DOCTYPE html> <html lang="en"> <head ...
- c++中计算程序执行时间
#include<iostream> #include<time.h> using namespace std; int main() { clock_t t1 = clock ...
- python中pip和pygame的安装
1.安装pip和pygame都很简单.首先咱们来安装pip,官网https://pypi.python.org/pypi/pip#download,下载pip的压缩文件,并将其解压. 我们在cmd的p ...
- Python单元测试框架之pytest 2 -- 生成测试报告
From: https://www.cnblogs.com/fnng/p/4768239.html Python单元测试框架之pytest -- 生成测试报告 2015-08-29 00:40 by ...
- 测试教程网.unittest教程.1. 基本概念
From:http://www.testclass.net/pyunit/basic_concept/ unittest是python自带的单元测试框架,有时候又被称为”PyUnit”,是python ...
- android 退出程序解决内存释放so的问题
做Android程序的时候发现一个问题,由于用到了so库,当应用程序退出了,但是手机变得很卡,点击"设置"查看应用程序,界面显示着可以点击"强制关闭". 由于这 ...
- LeetCode——11. Container With Most Water
一.题目链接:https://leetcode.com/problems/container-with-most-water/ 二.题目大意: 给定n个非负整数a1,a2....an:其中每一个整数对 ...
- C/C++基础----用于大型程序的工具(异常处理,命名空间,多重继承)
独立开发的子系统间协同处理错误的能力 使用各种库(可能包含独立开发的库进行协同开发的能力) 对比复杂的应用概念建模的能力 异常处理 异常将问题的检测和解决过程分离开 当执行一个throw之后,程序控制 ...