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. 网络采集软件核心技术剖析系列(6)---将任意博主的全部博文下载到SQLite数据库中并通过Webbrower显示(将之前的内容综合到一起)

    一 本系列随笔目录及本节代码下载 自己开发的豆约翰博客备份专家软件工具问世3年多以来,深受广大博客写作和阅读爱好者的喜爱.同时也不乏一些技术爱好者咨询我,这个软件里面各种实用的功能是如何实现的. 该软 ...

  2. WebStorm中部署网页到Tomcat

    1. 新建一个Deployment 在上面过程中Add Server弹窗下如下输入 2. 配置Deployment的Connection选项卡 3. 配置Deployment的Mappings选项卡 ...

  3. GIS空间参考及坐标转换

    空间参考(Spatial Reference)是 GIS 数据的骨骼框架,能够将我们的数据定位到相应的位置,为地图中的每一点提供准确的坐标. 在同一个地图上显示的地图数据的空间参考必须是一致的,如果两 ...

  4. html语义化小记录

    1.头部标签 <header></header> 2.大块集合 <article></article> 3.主要集和 <main></ ...

  5. Android 中 Environment.getExternalStorageDirectory()无效

    我们在处理缓存的时候,并不是每次都会在应用私有存储空间那里保存,很多时候是需要用到ExternalStorage.我们平时一般都是用Environment.getExternalStorageDire ...

  6. [转载]Delphi Tokyo 10.2.3发布了

    转载:http://blog.sina.com.cn/s/blog_44fa172f0102wwwg.html 今早最好的消息,Delphi 10.2.3如期发布,下载地址:http://altd.e ...

  7. IOS研究之多个UITextField的键盘处理

    在IOS开发中使用UITextField时常须要考虑的问题就是键盘的处理. 有时候,弹出的键盘会将UITextField区域覆盖,影响用户输入.这个时候就要将视图上移.这个时候我们须要考虑两点: 1, ...

  8. 配置composer全量镜像与主要命令

    配置中国全量镜像 查看当前composer配置的镜像地址 composer config -g repo.packagist 显示如下,显示说明没有配置镜像地址 接下来我使用下面的命令进行查看配置的镜 ...

  9. mssql性能优化

    总结下SQL SERVER数据库性能优化相关的注意事项,在网上搜索了一下,发现很多文章,有的都列出了上百条,但是仔细看发现,有很多似是而非或者过时(可能对SQL SERVER6.5以前的版本或者ORA ...

  10. TP框架在做上传时候提示:没有上传的文件!

      这个一般是由于上传的文件超过了php.ini里面的限制.修改一下参数就行了 具体,打开php.ini 文件 搜索post_max_size upload_max_filesize 改一个比较大的, ...