/**
* 只包含合并压缩混淆,监听服务
*/
// 引入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. 子元素margin-top为何会影响父元素?

    子元素margin-top为何会影响父元素? 引用地址:https://blog.csdn.net/sinat_27088253/article/details/52954688 2016年10月28 ...

  2. Hibernate框架基础

    Hibernate框架基础 Hibernate框架 ORM概念 O, Object 对象 R, Realtion 关系 (关系型数据库: MySQL, Oracle…) M,Mapping 映射 OR ...

  3. ubuntu 报错 libcublas.so.8.0

    在qt程序中使用yolo时报错: ./conjugateGradientPrecond: error while loading shared libraries: libcublas.so.8.0: ...

  4. javascipt中数组的常见操作

    1.与lua不同,即使数组中间有null或者undefined,仍然能求出正确的长度 2.length 改变.length也会改变数组的大小 3. indexOf arr.indexOf(a)会返回第 ...

  5. Locust 类的使用

     HttpLocust类 可定义多个HttpLocust类,即多个用户可执行不同的任务或者相同的任务,但是执行频率不一样,用weight进行约定. # coding:utf-8 from locust ...

  6. ios模拟器安装测试包方法

    1. 使用ios-sim ios-sim是一个可以用命令空着ios模拟器的工具.利用这个命令,我们可以启动模拟器.安装app.启动app.查询ios sdk,它可以使我们像自动化测试一样打开xcode ...

  7. @RequestMapping 和 @RequestBody的区别

    @RequestMapping要求:application/x-www-form-urlencoded 或不填 @RequestBody要求: application/json

  8. uvm_cmdline_processor

    无意中看到uvm_cmdline_processor,之前使用+UVM_TESTNAME也没深究,现在记录一下 内部调用脚本中的参数,通过使用uvm_cmdline_processor可以从脚本层级, ...

  9. Linux Intro - Remove 302 字符

    I have a file originally provided from a SQL database on a Windows platform. I transfer the file via ...

  10. mysql_connect(): Headers and client library minor version mismatch.

    查询当前Client 版本,结果如下: Client API version => 5.6.31Client API library version => 5.6.31Client API ...