var gulp = require('gulp'),
    sass = require('gulp-sass'),
    watch = require('gulp-watch'),
    browser = require('browser-sync'),
    imagemin = require('gulp-imagemin');
 
var path = {
    sass: 'sass/*.scss'
}
 
// 编译sass
gulp.task('sass', function(){
    gulp.src(path.sass)
        .pipe(sass())
        .pipe(gulp.dest('css/'));
});
 
// 压缩图片
gulp.task('imagemin', function(){
    gulp.src('./images/*.{png,jpg,gif,ico}')
        .pipe(imagemin())
        .pipe(gulp.dest('./img'));
});
 
// 自动刷新
var DEV = '.';
gulp.task('serve', function() {
    browser.init({
        server: DEV + '/'
    });
    gulp.watch(DEV + '/*.html' ).on('change', browser.reload)
    gulp.watch(DEV + '/js/*.js').on('change', browser.reload)
    gulp.watch(DEV + '/css/*.css').on('change', browser.reload)
});
 
gulp.task('watch', function(){
    gulp.watch(path.sass, ['sass']);
});
 
gulp.task('default', ['watch', 'serve']);

gulpfile.js(编译sass,压缩图片,自动刷新浏览器)的更多相关文章

  1. Gulpfile.js——编译、压缩、合并js和css文件

    gulp 一个入门教程:http://www.ydcss.com/gulp API文档地址:http://www.gulpjs.com.cn/docs/api/ 我的一个Low版的gulpfile v ...

  2. gulp之压缩合并MD5清空替换加前缀以及自动编译自动刷新浏览器大全

    gulp是基于流的前端构件化工具.目前比较火的前端构建化工具还是挺多的,grunt gulp fis3等等. 这个鬼东西有什么用?请参考https://www.zhihu.com/question/3 ...

  3. 前端自动化之sass实时编译及自动刷新浏览器

    gulp livereload实现sass实时编译及浏览器自动刷新 首先gulp是基于Node的,所以确保你已经安装 node.js,在Nodejs官方网站下载跟自己操作系统相对应的安装包. 先说一下 ...

  4. 分享Grunt.js配置: watch + liveReload 实时监测文件变化自动刷新浏览器

    http://www.tuicool.com/articles/2eaQJn 用Grunt配置watch和liveReload组件,可以实时检测指定的文件变化并自动刷新浏览器.目前基本已经成为了我的必 ...

  5. JS可控制的图片自动循环播放查看效果

    JS可控制的图片自动循环播放查看效果 <html> <head> <title>JS可控制的图片自动循环播放查看效果丨芯晴网页特效丨CsrCode.Cn</t ...

  6. webpack热加载:修改文件自动刷新浏览器并更新

    概述 之前用react脚手架,觉得那种修改了能立即自动刷新浏览器并更新的功能实在非常人性化,所以想在开发其它项目的时候能用上.于是查了一些资料记录在此,供以后开发时参考,相信对其他人也有用. 其实代码 ...

  7. django 调试 监控文件变化 自动刷新浏览器

    问题描述:修改html js py等文件后,自动刷新浏览器,解放F5,提高效率 解决办法:使用gulp,使用bowerSync 关于gulp,可以查看系列教程 关于bowerSync,查看官网 关于结 ...

  8. 更为简单的Ctrl+S自动刷新浏览器工具-LinrF5

    一款自动刷新浏览器的小工具,它通过监听用户的按键,如果在键盘按下 Ctrl+S ,则自动刷新浏览器,操作十分简单,前端开发必备神器,快速提升工作效率,支持IE.火狐以及最新版的chrome33.之前我 ...

  9. 编写gulpfile.js文件:压缩合并css、js

    使用gulp一共有四个步骤: 1. 全局安装 gulp: $ npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装: $ npm inst ...

随机推荐

  1. [Contest20171028]火神的鱼

    火神最爱的就是吃鱼了,所以某一天他来到了一个池塘边捕鱼.池塘可以看成一个二维的平面,而他的渔网可以看成一个与坐标轴平行的矩形.池塘里的鱼不停地在水中游动,可以看成一些点.有的时候会有鱼游进渔网,有的时 ...

  2. 【分块】【哈希】bzoj3578 GTY的人类基因组计划2

    每个房间用一个集合来维护,具体来说,就是给1-n的数每个数一个long long的hash值,往集合S里insert(i),就是S^=HASH[i]:erase(i),也是S^=HASH[i]. 用m ...

  3. python3开发进阶-Django框架中form的查看校验方法is_valid()的源码,自定义验证方法

    form表单的校验方法is_valid() 点开我们发现这个函数里面只有两个方法方法,最终返回True or False 我们点进.is_bound属性,里面判断传输的数据不是空和上传文件不是空 点进 ...

  4. Dom4jDemo应用-保存手机信息

    ---恢复内容开始--- import java.io.File; import java.io.FileNotFoundException; import java.io.FileOutputStr ...

  5. IntelliJ IDEA导入Maven之后强制刷新项目解决无法识别为Maven项目的问题

    先点击左下角按钮以显示Maven Project 再点击右侧Maven Project 点击刷新按钮,当然也可以点击加号选择pom.xml文件. 最后是等待项目的更新.

  6. SQL Server 事务隔离级别的解析

    近来在项目中遇到的一些有关事务的问题,跟同事间讨论了一下,后面翻看了一些书籍和做了一些测试,趁有点时间把它写下来,一来加深印象,二来希望对大家有所帮助,当然,由于自身水平问题,如理解有误,还请大牛指出 ...

  7. linux下获取占用CPU资源最多的10个进程

    linux下获取占用CPU资源最多的10个进程,可以使用如下命令组合: ps aux|head -1;ps aux|grep -v PID|sort -rn -k +3|head linux下获取占用 ...

  8. python 操作solr索引数据

    测试代码1: def test(self): data = {", "*字段名*": u"我是一个大好人"}}} params = {"bo ...

  9. Laravel系列教程一:安装及环境配置

    免费视频教程地址https://laravist.com/series/laravel-5-basic 最近在SF上面看到越来越多的Laravel相关的问题,而作为一个Laravel的脑残粉,本来打算 ...

  10. Sqoop操作实践

    Sqoop操作实践 @(Hadoop) Sqoop常用参命令 序号 命令/command 类 说明 1 impor ImportTool 从关系型数据库中导入数据(来自表或者查询语句)到HDFS中 2 ...