起因:需要搭建一个自动打包处理 sass / js (es6),自动监听文件变化时浏览器自动刷新的开发环境 项目目录 project build -css -js *.html src -html -sass -js 先放 gulpfile.js 文件,其他的详细配置稍后再介绍 const { src, dest, parallel,series, watch } = require('gulp'); const sass = require('gulp-sass'); const less =…

添加nodemon模块 cnpm install --save nodemon 根目录添加文件 nodemon.json { "restartable": "rs", "ignore": [ ".git", ".svn", "node_modules/**/node_modules" ], "verbose": true, "execMap": {…

一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作. 易于学习 通过最少的 API,掌握 Gulp 毫不费力,构建工作尽在掌握:如同一系列流管道. 二.依赖安装 1.安装node.js, 2.全局安装gulp npm install gulp -g 3.本地安装gulp npm init…

本文转载自: 使用 gulp 搭建前端环境入门篇…

首先gulp是基于Node的,所以确保你已经安装 node.js,在Nodejs官方网站下载跟自己操作系统相对应的安装包. 先说一下gulp安装流程: 1:全局安装gulp,操作为: npm install gulp -g;2:在根目录下创建 package.json文件,操作为:npm init,之后根据操作输入“名字,版本号,描述”等内容,直接按回车则使用默认值,最后根据提示输入YES即可:输完后根目录下多了个package.json文件:3:本地安装gulp,先进入你的项目所在,如d盘下的…

gulp是基于流的自动化构建工具官方网址:http://www.gulpjs.com.cn/ 一.安装需要的模块 1.新建package.json,输入下面的内容 { "name": "autopractice", "version": "1.0.0", "description": "", "main": "index.js", "sc…

gulp livereload实现sass实时编译及浏览器自动刷新 首先gulp是基于Node的,所以确保你已经安装 node.js,在Nodejs官方网站下载跟自己操作系统相对应的安装包. 先说一下gulp安装流程: 1:全局安装gulp,操作为: npm install gulp -g;2:在根目录下创建 package.json文件,操作为:npm init,之后根据操作输入“名字,版本号,描述”等内容,直接按回车则使用默认值,最后根据提示输入YES即可:输完后根目录下多了个package…

一.安装node nodejs下载地址:https://nodejs.org/ nodejs自带npm模块管理器,安装完成之后打开dos命令窗口输入 node -v就能查看nodejs是否安装成成功 由于npm安装module太慢,建议使用淘宝镜像:npm install cnpm -g --registry=https://registry.npm.taobao.org 安装完成,查看cnpm -v 二.安装gulp 1,gulp安装分为全局安装和局部安装 首先进行全局安装:npm insta…

转载:http://www.cnblogs.com/ssrsblogs/p/6155747.html 重装了 webstorm ,从10升级到了2016 一升不要紧,打开老项目,开启webpakc-dev-server,然后改代码,发现浏览器不会自动刷新了!!! 这可急死我了,各种卸载webpack.webpack-dev-server,安装各种版本,调试.各种查资料查文档,都讲的是参数配置(webpack-dev-server启动就会自刷新,参数都是其它用途). 然后结果都是 no work!…

本文版权桂博客园和作者吴双共同所有,转载和爬虫请注明原文地址 http://www.cnblogs.com/tdws/p/6016055.html 写在前面 大家好我是博客园的蜗牛,博客园的蜗牛就是我.学习这篇文章,你不需要任何nodejs基础,当然你有的话就更顺利了.园子里有很多全栈或者是前端后台数据库都有需要你发光发热的人.也许你很喜欢做着这样的事儿,也许你不喜欢但是难以逃脱这样的安排.但是,无论你是前端,还是后端,还是全栈,好的工具和方法总是很重要的.当你在VS里写前端页面时,一遍又一遍的…

问题描述:修改html js py等文件后,自动刷新浏览器,解放F5,提高效率 解决办法:使用gulp,使用bowerSync 关于gulp,可以查看系列教程 关于bowerSync,查看官网 关于结合两者使用,查看教程 简单说一下: 1. install npm 2. install gulp 3. install bowerSync 4. touch gulpfile.js var gulp = require('gulp'); var browserSync = require('brow…

[安装] 1 npm install -g browser-sync [静态项目使用browsersync] 自己可以去browsersync官网查看,其实使用很简单,总结下就是: 1 browser-sync start --server --files "**/*.css, **/*.html, **/*.js" cd到项目下,然后执行上面的方法即可, 简单的说就是会监听该目录下的html,css,js变化,然后自动刷新页面 [动态项目使用browsersync] 动态项目的意思,…

http://www.tuicool.com/articles/2eaQJn 用Grunt配置watch和liveReload组件,可以实时检测指定的文件变化并自动刷新浏览器.目前基本已经成为了我的必备配置.特别是在写前端页面的时候,不用再频繁去点浏览器刷新按钮.工作的时候把浏览器拖到扩展屏,保存文件实时看到变化,特别提高开发效率. 而且livereload插件非常人性化,在检测到不需要重刷新浏览器运行的文件,例如css文件变化时,直接在页面里重载文件,而不刷新页面.使效果反应非常快捷. 下面是…

Window10系统有时候会遇到以下类似的问题 1.文件删除后,图标还在,无法自动刷新屏幕,按F5或右键菜单刷新后才消失 2.文件粘贴后,不显示,刷新后才显示 3.回收站清理后,文件图标仍显示有垃圾 解决方法: 1.打开启动注册表编辑器,展开HKEY_LOCAL_MACHINE\System\CurrentControlSet\Control\Update如果没有Update项,右击Control选择新建项目,命名为Update 2.右击Update项目,新建DWORD值(32位),命名为Upd…

重点:parcel index.html 需要引入 index.js 否则不自动刷新…

/** * Created by 1900 on 12/18/2015. */ var plugins={ fs:require("fs"), gulp:require("gulp"), uglify:require("gulp-uglify"), connect :require('gulp-connect'), notify:require("gulp-notify") } var gulp = plugins.gulp;…

转自: http://blog.csdn.net/bjourney/article/details/46832159 在Xcode6创建问的时候,会自动生成注释 //  Created byxxx on 15/7/10. //  Copyright (c) 2015年 xxxx. All rights reserved. xxx默认为电脑用户名,那么如何修改呢?方法如下: 右键Xcode图标,显示包内容 /Contents/Developer/Library/Xcode/Templates/Fi…

在Xcode里创建的时候,会自动生成注释 //  Created byxxx on 15/7/10. //  Copyright (c) 2015年 xxxx. All rights reserved. xxx默认为电脑用户名,那么如何修改呢? 方法如下: 右键Xcode图标,显示包内容 /Contents/Developer/Library/Xcode/Templates/File Templates/Source C File.xctemplate C++ File.xctemplate C…

一:因为游览器缓存问题 有时候在写完代码后,刷新游览器,发现自己写的目标是让某一个东西隐藏,但是结果是依旧显示着,打开调试工具在Sources中发现,文件依旧是上次的旧的文件,新文件没有加载进去,无论怎么刷新,都不改变,因博主使用的为chrome游览器,所以只附带着chrome的解决方案 二:chrome处理的方法 F12打开开发者模式 选择如上图所指处 有些人的chrome不再这里,所以请自己找 勾选上这个,即可成功 其他游览器的请看这里…

安装gulp (前提是已经安装了node) 全局安装: npm install -g gulp 本项目安装: npm install gulp --save-dev 安装browser-sync 全局安装: npm install -g browser-sync 本项目安装: npm install browser-sync --save-dev 编写代码 在项目根目录下创建文件gulpfile.js 在gulpfile.js中写入如下代码 const gulp=require("gulp&qu…

LiveReload可以理解为即时刷新,在前端开发中,开发者在编写或调试html/js/css代码后需要从编辑器切换到浏览器,再刷新浏览器才能看到页面变化,这种频繁的操作在一定程度上影响了工作效率,而LiveReload可以帮助我们解决了这个问题. 实现原理:通过在本地开启一个websocket服务,检测文件变化,当文件被修改后触发livereload任务,推送消息给浏览器刷新页面. 安装gulp-connect插件 npm install gulp-connect 配置代码…

Win10 桌面创建文件/文件夹需要F5刷新才出来,资源管理器中创建也是一样的问题. 网上搜索的结果都以修改注册表,禁用音频面板检测,上述方案可能能解决部分情况. 实际上是桌面图标缓存出问题,以下是一个简单动作即可解决问题. 按Win+R键打开“运行”窗口,输入如下命令后按回车键执行: ie4uinit -show…

gulp是基于流的前端构件化工具.目前比较火的前端构建化工具还是挺多的,grunt gulp fis3等等. 这个鬼东西有什么用?请参考https://www.zhihu.com/question/35595198 为什么选择gulp,因为使用非常简单,学习成本低.以后想用别的工具再转去学也不难. 一个自动化构建工具都没用过的前端,何以谈人生? 以下是正题: 1.要玩gulp,首先得安装node,因为npm跟随node的包安装管理工具.具体下载直接百度nodejs中文网,根据自身的环境(wind…

1.简介 使用gulp搭建一个传统的多页面前端项目的开发环境 支持pug scss es6编译支持 支持开发环境和打包生成sourceMap 支持文件变动自动刷新浏览器,css是热更新(css改动无需刷新浏览器即可更新) 支持新增文件没无需重启gulp,即可改动自动刷新浏览器 支持eslint,使用的eslint插件是eslint-config-alloy 支持打包html,css,js图片压缩,css中小图片转base64 支持css,js文件版本hash值,文件无变动则版本hash不会改变,…

1. 什么是vue-cli? vue-cli是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板,创建命令如下: vue init webpack xxx 注1:xxx 为自己创建项目的名称 注2:必须先安装vue,vue-cli,webpack,node等一些必要的环境 2. 安装vue-cli npm install -g vue-cli npm install -g webpack 注1:安装成功后,会出现如下文件 D:\initPath node-v10.15.3-…

Yeoman包括了三个部分yo(脚手架工具).grunt/gulp(构建工具).bower(包管理器).听说gulp更容易上手,所以我就没用grunt而选的gulp 什么是开发流程? 在我看来一个完整的开发流程应该包括: 本地开发环境的初始化 第三方依赖的管理 源文件编译 自动化测试 发布到pipeline和各个环境 而现代的开发流程,就是要使上面的各个部分都可以自动化,一个命令就可以使这些流程都自动走完,并且快速的得到错误或通过的反馈,让我们可以方便快速的修复错误和release. 工具简单介…

这些天在项目之余的时间学习了webpack打包项目的东西,非常荣幸的找到一些大神的文章来学习,死劲嚼了几天,终于略知一二.在以后的工作上还需继续学习,下面我将分享我这几天学到的一点东西,希望能让我一个还不算入门webpack的小白领大家入门.本文主要还是摘抄大神的文章加上自己手动的一些过程记录,不喜勿喷,谢谢!开车了!!!开车了!!! 一.什么是Webpack webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler).当 webpack 处理应用程序…

情况描述: 我们很容易遇到这样一种情况: 我们并不是一开始就规划好了整个项目,比如可能接手别人的项目或者工程已经手动创建好了,现在要想利用gulp来实现浏览器自动刷新,那么如何做呢? 其实非常简单,本篇文章将详细介绍实现方法和其中可能遇到的一些坑. 假设你已经使用npm全局安装了gulp,那么具体方法如下: 一.创建gulpfile.js文件 首先在项目根目录创建gulpfile.js文件,其作用在于,一旦我们在命令行输入gulp命令就可以读取gulpfile.js文件,运行其中的代码. 现在g…

感谢大佬:https://blog.csdn.net/ordinaryprogrammerc/article/details/83013710 本文链接:https://blog.csdn.net/ordinaryprogrammerc/article/details/83013710 我这次遇到的问题是重新导入之前的项目发现项目java文件中文乱码,我首先确认下java文件的编码是什么格式,选择乱码的java文件右键选择properties,进入该文件的设置页面,选择resources属性,在…

http://itakeo.com/blog/2016/05/19/gulpreload/?none=123 使用gulp插件来自动刷新页面.再也不用修改一次,按一下F5了. 首选通过npm install gulp安装gulp. 在安装npm install gulp-connect.自动刷新,主要是通过这个插件来完成的. 最后配置gulpfile.js,内容如下: var gulp = require('gulp'), connect = require('gulp-connect'); /…