/**
* 只包含合并压缩混淆,监听服务
*/
// 引入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. MPMoviePlayerViewController不能播放本地mp4的解决办法.

    之前一直用MPMoviePlayerViewController进行网络播放,最近下载文件然后本地播放,发现怎么播放都是黑屏.后来发现MPMoviePlayerViewController的本地URL ...

  2. jenkins 判断是手动触发还是定时器触发

    根据变量BUILD_CAUSE的值可以判断本次触发是手动触发还是定时器触发 手动触发:MANUALTRIGGER 定时器触发:TIMERTRIGGER

  3. 进阶篇:4.2.6)DFMEA故障库的建立与积累

    本章目的:DFMEA故障库的建立与积累. 1.故障库的认知 故障库是一种数据库,只是这个数据库中储存的是故障模式,也就是失效模式. 从前文DFMEA章节的学习中,我们可以知道,DFMEA对不同层级的失 ...

  4. 牛客练习赛28-B(线段树,区间更新)

    牛客练习赛28 - B 传送门 题目 qn姐姐最好了~ ​ qn姐姐给你了一个长度为n的序列还有m次操作让你玩, ​ 1 l r 询问区间[l,r]内的元素和 ​ 2 l r 询问区间[l,r]内的 ...

  5. Shiro入门资源整理

    学习一个框架,查阅权威有效的资料能够事半功倍,本文收集笔者学习此框架中帮助很大的文档,希望对大家有所帮助. 对于文档类的,强烈建议看官方文档,而不是百度出来的经过网友加工或者搬运过来的资料!! shi ...

  6. jquery-ui Datepicker 创建 销毁

    控件选项defaultDate 设置日期控件的默认日期(高亮显示的日期),如果没有设置该选项,那么就使用当前日期,这一选项只适用于input元素没有设置value属性的情况altField 额外自定一 ...

  7. vue中npm run dev 不能自动打开浏览器运行项目

    最近用vue2.0 + webpack搭建了环境创建新的项目.出现一个很蹩脚的问题: 在终端输入 npm run dev 的时候,不能自动打开浏览器运行项目. 这段话的意思是:你的应用程序运行地址是: ...

  8. python __getattribute__、__getattr__、__setattr__详解

    __getattribute__ 官方文档中描述如下: 该方法可以拦截对对象属性的所有访问企图,当属性被访问时,自动调用该方法(只适用于新式类).因此常用于实现一些访问某属性时执行一段代码的特性. 需 ...

  9. python web开发小结

    书籍 <python基础教程> <流畅的python> web框架 flask django tornado ORM sqlalchemy orator 消息队列 celery ...

  10. epoll_wait 返回值学习以及epoll使用学习

    https://blog.csdn.net/analogous_love/article/details/88721574