gulp相关
'use strict'; var gulp = require('gulp'), webserver = require('gulp-webserver'), //gulp服务器
connect = require('gulp-connect'), //创建本地服务器 sass = require('gulp-sass'), //sass编译器
less = require('gulp-less'), //less编译器 uglify = require('gulp-uglify'), //最小化js文件
cssmin = require('gulp-minify-css'), //最小化css文件
imagemin = require('gulp-imagemin'), //最小化图片 browserSync = require('browser-sync').create(), //实时自动刷新,支持多种设备
livereload = require('gulp-livereload'), //网页自动刷新,浏览器中还需安装插件,使用不便 autoprefixer = require('gulp-autoprefixer'),//自动补全浏览器兼容的css
concat = require('gulp-concat'), //文件合并,并且带版本后缀,以清除页面缓存
clean = require('gulp-clean'), //文件清理,将不需要的文件清除掉 zip = require('gulp-zip'), //自动打包并按时间重命名
sourcemaps = require('gulp-sourcemaps'), //资源map记录
plumber = require('gulp-plumber'), //任务错误中断自动重传 var root = {
web: 'web/',
} // 启动服务器
gulp.task('webserver', function() {
// 打开网站页面
gulp.src(root['web'])
.pipe(webserver({
host: '0.0.0.0',
port: 8000,
directoryListing: {
enable:true,
path: root['web']
}
})
);
}); // less解析
gulp.task('less', function(){
//编译src目录下的所有less文件
//除了reset.less和test.less(**匹配src/less的0个或多个子文件夹)
// gulp.src(['src/less/*.less', '!src/less/**/{reset,test}.less'])
gulp.src('web/less/*.less')
// 开启sourcemap
.pipe(sourcemaps.init())
.pipe(less())
//将编译后的css压缩,
//兼容IE7及以下需设置compatibility属性 .pipe(cssmin({compatibility: 'ie7'}))
.pipe(cssmin())
// 生成写入sourcemap文件
.pipe(sourcemaps.write())
.pipe(gulp.dest('web/css'));
}); // 监听事件,可单独监听部分代码,也可以全部监听
gulp.task('watch', function(){
// 当所有less文件发生改变时,调用less任务
// gulp.watch('web/**/*.less',['less']);
// 监听很多的文件
gulp.watch(['web/**/*.*'], ['html','less','js','jpg','png','gif']);
}); // gulp-connect插件:实时刷新
gulp.task('connect', function(){
connect.server({
root:'web',
livereload:true //开启实时刷新
});
}); gulp.task('default', ['webserver','watchLess','connect']); // gulp.task('default', function() {
// // 将需要的放到基本加载项里面
// gulp.start('webserver');
// gulp.start('watchLess');
// });
tip:
单独执行某个gulp都是直接 gulp 启动项名称
例如监听事件,我的gulp任务名称为watchLess,所以命令为gulp watchLess
关于package.json文件里面的配置
没必要每次自己手动的添加,npm某个package的时候直接命令行,下载完毕会自动添加
比如下载gulp-less,命令:cnpm install gulp-less --save-dev
gulpfile常用的配置
gulp-webserver 服务器启动项
gulp-less less启动项
gulp-sass sass启动项,天生自带压缩特效
gulp-minify-css 将编译后的css压缩(直接在原有的less配置里面添加就好了.pipe(cssmin()))
gulp-sourcemaps 用于生成less与css编译时的引入关系,方便日后查找修改
gulp-uglify 用于压缩js
gulp-imagemin 用于压缩图片,包括jpg,png,gif
gulp相关的更多相关文章
- npm以及gulp相关操作
在工作流相关的第一篇博客中,我们安装了nodejs的环境,那么nodejs自带的npm是一个功能十分强大的管理器,它已经不仅仅是局限于nodejs的版本管理器了,那么当现在我们可以通过npm来下载我们 ...
- 构建工具-Gulp 相关知识
layout: layout title: 『构建工具-Gulp』相关内容整理 date: 2017-04-26 22:15:46 tags: Gulp categories: Tools --- G ...
- gulp相关知识(2)
将之前的东西的理论部分整理了一下—— gulp 前端构建工具 它可以帮助我们完成一些自动化操作 它需要一些插件的支持 var gulp = require('gulp'); --> gulp命令 ...
- gulp相关知识(1)
这是一种简单的工具,非常容易上手而且功能也是多种多样. 例如将整个网站打包下来的时候,看到的js代码总是混乱的,这就是类似于gulp的工具进行了加密,其他的功能还有很多这里就不赘述了. 首先是gulp ...
- gulp 相关文章
1.https://www.cnblogs.com/sxz2008/p/6370221.html 2.https://www.cnblogs.com/wujie520303/p/4964931.htm ...
- Gulp 相关
获取执行在文件列表: http://www.thinksaas.cn/ask/question/21950/ 用through2这个插件. var through = require('through ...
- 前端打包构建工具gulp快速入门
因为之前一直有人给我推荐gulp,说他这里好哪里好的.实际上对我来说够用就行.grunt熟悉以后实际上他的配置也不难,说到效率的话确实是个问题,尤其项目大了以后,目前位置遇到的项目都还可以忍受.不过不 ...
- 【gulp】工作中的实战
写这篇文章的目的是为了以后的项目中懒得再去配gulp,直接可以拿这篇博客中的来用,因为有时候配置还是挺烦人的. gulp相关插件的介绍 用法比较简单,假设大家都会用gulp,下面主要介绍一下一些插件的 ...
- gulp之压缩合并MD5清空替换加前缀以及自动编译自动刷新浏览器大全
gulp是基于流的前端构件化工具.目前比较火的前端构建化工具还是挺多的,grunt gulp fis3等等. 这个鬼东西有什么用?请参考https://www.zhihu.com/question/3 ...
随机推荐
- GitLab 的安装及汉化
系统环境:CentOS7 切记:安装GitLab 时会自动安装GitLab自带的Nginx,为了避免冲突,部署环境时先不要安装Nginx. 官网安装及汉化安装 官网安装最新版GitLab:https: ...
- 正交矩阵、正规矩阵和酉矩阵(转自Ramble Over The Cloud~)
网址:http://blog.csdn.net/alec1987/article/details/7414450 在数学中,正规矩阵 是与自己的共轭转置交换的复系数方块矩阵,也就是说, 满足 其中 是 ...
- 在ABAP里取得一个数据库表记录数的两种方法
方法1:使用函数EM_GET_NUMBER_OF_ENTRIES 这个函数使用起来很简单,只需要将想查询的数据库表名称维护进输入参数IT_TABLES: 上图说明这个函数支持批量操作,我查询的两张表名 ...
- POJ-2718 Smallest Difference---DFS
题目链接: https://vjudge.net/problem/POJ-2718 题目大意: 有一列数,对其任意分成两组,每组按一定顺序可以组成一个数.问得到的两个数的差最小是多少. 思路: 直接d ...
- 数黑格有多少个,模拟题,POJ(1656)
题目链接:http://poj.org/problem?id=1656 #include <stdio.h> #include <iostream> #include < ...
- 【造轮子】开发vue组件库MeowMeowUI
项目示例 github 1. 创建项目 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue in ...
- Unicode编码字符 转换成汉字
转载:http://www.chengxuyuans.com/iPhone_IOS/48128.html - (NSString *)replaceUnicode:(NSString *)unicod ...
- jquery 操作css 选择器
.addClass() 为每个匹配的元素添加指定的样式类名 .addClass(className) className 为每个匹配元素所有增加的一个或多个样式名 .addClass(function ...
- HDU.2561 第二小整数(water)
题目来源:2561 题意分析:找出一堆数中第二小的整数,和题目说的一样 我的思路:冒泡或者sort()一下就ok了,但是我因为没看到多个测试用例还是吃了几记WA . ┭┮﹏┭┮ 完整代码: #incl ...
- Java分享笔记:泛型类的定义与使用
当类中要操作的引用数据类型不确定时,可以定义泛型类完成扩展.下面是程序演示. package packB; class Student { //定义学生类 public String st = &qu ...