/**
* 只包含合并压缩混淆,监听服务
*/
// 引入gulp模块
var gulp = require('gulp'); // 引入其他模块
var less = require('gulp-less'),// less转化
concat = require('gulp-concat'),// 文件合并
minicss = require('gulp-mini-css'),// css压缩
uglify = require('gulp-uglify'),// js压缩
obfuscate = require('gulp-obfuscate'),// js混淆
htmlmin = require('gulp-htmlmin'), // html压缩
imgmin = require('gulp-imagemin'), // 图片压缩
browserSync = require('browser-sync');//服务启动 // 处理css操作
gulp.task('styles', function () {
gulp.src('./src/styles/*.less')
.pipe(less())// 转化为css
.pipe(concat('allCss.css'))// 合并css
.pipe(minicss())// 压缩css
.pipe(gulp.dest('./dist/css'))
.pipe(browserSync.reload({stream: true}));
}); // 处理js操作
gulp.task('scripts', function () {
gulp.src('./src/scripts/*.js')
.pipe(concat('all.js'))
.pipe(obfuscate())
.pipe(uglify())
.pipe(gulp.dest('./dist/scripts'))
.pipe(browserSync.reload({stream: true}));
}); // 图片操作
gulp.task('images', function () {
gulp.src('./src/images/*.*')
.pipe(imgmin())
.pipe(gulp.dest('./dist/images'));
}); // 处理html操作
gulp.task('htmls', function () {
gulp.src('./src/*.html')
.pipe(htmlmin({
collapseWhitespace: true,
removeComments: true
}))
.pipe(gulp.dest('./dist'))
.pipe(browserSync.reload({stream: true}));
}); // 监听文件
gulp.task('serv', function () {
browserSync.init({
server: {baseDir: ['./dist']}
});
gulp.watch('./src/styles/*.less', ['styles']);
gulp.watch('./src/scripts/*.js', ['scripts']);
gulp.watch('./src/*.html', ['htmls']);
});

gulpfile配置的更多相关文章

  1. 送干货,实用内联gulp插件——gulp-embed

    现在npm上有很多gulp内联工具,用于把脚本和样式内嵌到HTML页面上,之前搞项目我也在这些插件中寻觅许久,但均不满足公司项目的一个需求—— HTML上同时插入了开发(dev版,src文件夹下,比如 ...

  2. 【gulp-sass】error: File to import not found or unreadable

    简要记录一下在使用gulp-sass时候踩的坑,虽然不明所以然,但是似乎在https://github.com/dlmanning/gulp-sass/issues/1 找到了答案. 在使用gulpf ...

  3. gulp的使用(二)之gulpfile.js文件的配置

    Gulpfile.js是什么文件: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她, ...

  4. 简单的gulpfile.js参数配置

    这里gulp安装和模块安装我就不提了,先简单写一些配置函数 for example /** * Created by yumeiqiang on 16/7/26. */var gulp = requi ...

  5. Gulp常用前端流程自动化配置

    前言 近期的项目全部由Grunt + LESS 转向改用Gulp + SASS 进行前端开发,也就奔着Gulp那比较好用的自定义函数而来的. 一.package.json文件配置如下: { " ...

  6. 学习安装并配置前端自动化工具Gulp

    Gulp和所有Gulp插件都是基于nodeJs来运行的,因此在你的电脑上需要安装nodeJs,安装过程请移驾安装并配置前端自动化工具--grunt.安装完成后,通过运行cmd进入DOS命令窗口,如图: ...

  7. gulp使用配置

    gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速 ...

  8. webpack如何与gulpfile联合的使用

    一.对webpack的一些理解 webpack支持CommonJS的书写形式. CommonJS指一个文件一个模块,但会一次性加载(即同步加载),但在浏览器端不适用这种方式,加载速率什么的,于是引入了 ...

  9. webpack + vuejs 基本配置(一)

    开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack2.Vue.js3.npm4.nodejs —- 这个就不给连接了,因为上面的连接都是在你实 ...

随机推荐

  1. 关于java中String的用法

    在java 中String存在许多的基本函数,接下来了解一下这些函数的基本用法 String.equals用法(这个用法比较难) String类中的equals()方法: public boolean ...

  2. 洛谷 P5249 [LnOI2019]加特林轮盘赌 题解【概率期望】【DP】

    很有意思的题目. 题目背景 加特林轮盘赌是一个养生游戏. 题目描述 与俄罗斯轮盘赌等手枪的赌博不同的是,加特林轮盘赌的赌具是加特林. 加特林轮盘赌的规则很简单:在加特林的部分弹夹中填充子弹.游戏的参加 ...

  3. DataGridView绑定list的注意事项

    1.DataGridView数据绑定对比(DataTable与泛型List):       当DataGridView的DataSource是DataTable的时候,DataTable的数据改变时, ...

  4. 基于python实现Oracle数据库连接查询操作

    使用python语言连接Oracle数据库配置 #coding:utf-8 import cx_Oracle as oracle db=oracle.connect('root/123456@192. ...

  5. SD341X-SD343H蜗轮传动伸缩蝶阀厂家,SD341X-SD343H蜗轮传动伸缩蝶阀价格 - 专题栏目 - 无极资讯网

    无极资讯网 首页 最新资讯 最新图集 最新标签   搜索 SD341X-SD343H蜗轮传动伸缩蝶阀 无极资讯网精心为您挑选了(SD341X-SD343H蜗轮传动伸缩蝶阀)信息,其中包含了(SD341 ...

  6. CSS中margin属性

    css中margin块级元素的垂直相邻外边距会合并,比如 方框的上下外边距并不是2px,而是合并为1px了. 设置float属性就可以避免这种同级元素边距合并

  7. md5码加密(Python)

    import hashlib import hmac m = input('输入要加密内容:') md = hashlib.md5()#生成md5 hash对象 md.update(m.encode( ...

  8. WPF的布局-Grid(表格布局)

    1. Grid布局就是表格布局 如下图: 2. 使用方法 2.1. 先生成适量的行和列,代码如下: <Grid><!--使用Grid控件--> <Grid.ColumnD ...

  9. Mybatis多参数

    转载自:一杯甜酒 http://blog.csdn.net/u012562943/article/details/52316071 据我目前接触到的传多个参数的方案有三种.第一种方案 DAO层的函数方 ...

  10. Python基础(3) - 数据类型:1数字类型

    Python数据类型 数据类型 是否容器 是否可变 存储方式 数字 否 否 直接 字符串 否 否 直接 列表 是 是 顺序 元组 是 否 顺序 字典 是 是 映射 数字类型 整  型:1,234,0, ...