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 —- 这个就不给连接了,因为上面的连接都是在你实 ...
随机推荐
- falsk 请求钩子
请求钩子是通过装饰器的形式实现,Flask支持如下四种请求钩子:before_first_request在处理第一个请求前执行before_request在每次请求前执行如果在某修饰的函数中返回了一个 ...
- NameError: name 'unicode' is not defined
更改Unicode为str 然后重新setup install
- [BZOJ 5074][Lydsy1710月赛]小B的数字
传送门 \(\color{green}{solution}\) 设 \[b_{i}=2^{w_{i}},sum= \sum_{i=1}^{n}{w_{i}}\] 则对于任意\(a_{i}\)都有 \[ ...
- dynamics crm 365 附件上传图片并且显示。
参考了几篇博客做的: 新增websource文件(html): <!DOCTYPE html> <html> <head> <title>注释</ ...
- ptyhon技能树及其学习资源
GUI编程 tkinter Github项目 Tkinter by example effbot 文档 tkinter的一个designer,可以像在qtdesign那样创建UI文件 pyqt5 py ...
- 《JavaScript编程精解》读书笔记
第一章 JavaScript基础:值.变量.控制流程 JavaScript里有六种基本类型:number类型.string类型.boolean类型.object.function和undefined. ...
- 彻底解决matplotlib中文乱码问题(转)
彻底解决matplotlib中文乱码问题 1.环境查看a.系统版本查看[hadoop@p168 ~]$ cat /etc/redhat-releaseCentOS Linux release 7.2. ...
- (转)linux基本变量学习:位置变量$0 、$1 shift轮替、本地变量、环境变量、特殊变量
原文:http://blog.51cto.com/woyaoxuelinux/1863045 shell: 弱类型编程语言 强:变量在使用前,必须事先声明,甚至还需要初始化: 弱:变量用时声明,甚至不 ...
- spring-boot 应用配置文件(.properties或.yml)
1.应用配置文件(.properties或.yml) .properties在配置文件中直接写: name=Isea533 server.port=8080 .yml格式的配置文件如: name: I ...
- JVM, JRE,JDK 的区别
在网上看到一篇讲解jvm,jre,jdk区别的文章,感觉不错,就收藏到自己的博客了. 1.JVM -- java virtual machine JVM就是我们常说的java虚拟机,它是整个java实 ...