gulpfile配置
/**
* 只包含合并压缩混淆,监听服务
*/
// 引入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配置的更多相关文章
- 送干货,实用内联gulp插件——gulp-embed
现在npm上有很多gulp内联工具,用于把脚本和样式内嵌到HTML页面上,之前搞项目我也在这些插件中寻觅许久,但均不满足公司项目的一个需求—— HTML上同时插入了开发(dev版,src文件夹下,比如 ...
- 【gulp-sass】error: File to import not found or unreadable
简要记录一下在使用gulp-sass时候踩的坑,虽然不明所以然,但是似乎在https://github.com/dlmanning/gulp-sass/issues/1 找到了答案. 在使用gulpf ...
- gulp的使用(二)之gulpfile.js文件的配置
Gulpfile.js是什么文件: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她, ...
- 简单的gulpfile.js参数配置
这里gulp安装和模块安装我就不提了,先简单写一些配置函数 for example /** * Created by yumeiqiang on 16/7/26. */var gulp = requi ...
- Gulp常用前端流程自动化配置
前言 近期的项目全部由Grunt + LESS 转向改用Gulp + SASS 进行前端开发,也就奔着Gulp那比较好用的自定义函数而来的. 一.package.json文件配置如下: { " ...
- 学习安装并配置前端自动化工具Gulp
Gulp和所有Gulp插件都是基于nodeJs来运行的,因此在你的电脑上需要安装nodeJs,安装过程请移驾安装并配置前端自动化工具--grunt.安装完成后,通过运行cmd进入DOS命令窗口,如图: ...
- gulp使用配置
gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速 ...
- webpack如何与gulpfile联合的使用
一.对webpack的一些理解 webpack支持CommonJS的书写形式. CommonJS指一个文件一个模块,但会一次性加载(即同步加载),但在浏览器端不适用这种方式,加载速率什么的,于是引入了 ...
- webpack + vuejs 基本配置(一)
开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack2.Vue.js3.npm4.nodejs —- 这个就不给连接了,因为上面的连接都是在你实 ...
随机推荐
- 使用canvas实现画中画效果的H5
最近看到一个挺有趣的H5,主要效果就是通过不断的放缩来展示画中画,网上找了一下并没有这方面的实现代码,故决定原创一下,并分享出来 主要的思路就是通过canvas不断的写入图片,考虑到每一层的图片的位置 ...
- POJ2259 Team Queue (JAVA)
第一次TLE,对每个group重新设置Queue中定位,定位到每个group的最后一个元素,但WA 经过检查,DEQUEUE时没有根据情况重新计算group,插入时没有根据情况重新给last赋值 贴A ...
- esp_err_t esp_event_loop_init(system_event_cb_t cb, void *ctx);
esp_err_t esp_event_loop_init(system_event_cb_t cb, void *ctx){ if (s_event_init_flag) { return ESP_ ...
- 2016级算法第五次上机-F.ModricWang的水系法术
1066 ModricWang的水系法术 思路 比较典型的最大流问题,需要注意的是,题目已经暗示(明示)了这里的边是双向的,在建图的时候需要加上反向边的容量值. 解决最大流问题的基本思路就是不断在残量 ...
- 编程开发之--Oracle数据库--存储过程使用动态参数绑定(3)
1.动态参数绑定,可以实现动态的执行不同的sql --创建包 create or replace PACKAGE MYPACKAGE AS type empcursor is ref cursor; ...
- fetch 请求列表ListView
//练习二 电影列表(网络请求数据)可参考:http://www.jianshu.com/p/22de6734d858 /** 展示电影列表* 逻辑:* 未获得数据时:显示等待页面* 获得数据时: 显 ...
- Idea中更改主题后xml配置文件局部黄色背景颜色去除
相信很多小伙伴和我一样一样的,喜欢更换Idea的主题,但是细心的小伙伴就发现了,每次更改主题后xml配置文件就会局部产生黄色背景颜色,对于强迫症患者真的是够了,网上也有部分文章,但是不够详细,也跟Id ...
- JavaWeb学习笔记(十五)—— 使用JDBC进行批处理
一.什么是批处理 批处理就是一批一批的处理,而不是一个一个的处理! 当你有10条SQL语句要执行时,一次向服务器发送一条SQL语句,这么做效率上很差!处理的方案是使用批处理,即一次向服务器发送多条SQ ...
- mysql 查询json字段 json_extract (mysql 5.7及以上)
找第一层: SELECT * FROM tourists WHERE json_data->'$.weixinOpenId' = '299485886686868' 或者 SELECT * FR ...
- Angular 例子
前提 angular-cli 是过时的 @angular/cli 用是主流 通讯录 Angular 从零到一 别人是在安装包的时候全程FQ,用蓝灯,每月700M的免费流量 nice fish A ...