前言 通常我们所做的一些页面,我们可以从设计图里面看出有一些地方是相同的.例如:头部,底部,侧边栏等等.如果前后端分离时,制作静态页面的同学,对于这些重复的部分只能够通过复制粘贴到新的页面来,如果页面的数量上去了而中途公共的部分出现要修的地方.不过有上10个页面都用到了这个公共的html代码.那修改起来不是很麻烦吗? 一些其他方法比如ifram,import都不够优雅,并且源代码中的不显示的,也就不利于SEO 头部: 尾部: 对于后端的同学而言,他们可以通过模版来进行拆分.这样做可以提高html…

打开package.json,添加main:gulpfile.js     在dependencies中添加gulp,vs2015十分智能,可以智能从npm中获取依赖如下图:     在添加过程中注意查看输出,如下图     如果提示node js或者npm版本过低需要更新,如果更新后还是过低需要调整vs2015设置如下,取消使用沙盒版本.     添加完毕后的依赖项显示如下:         打开gulpfile.js编写如下代码,意在改名和压缩js. var gulp = require("…

前言 通常我们所做的一些页面,我们可以从设计图里面看出有一些地方是相同的.例如:头部,底部,侧边栏等等.如果前后端分离时,制作静态页面的同学,对于这些重复的部分只能够通过复制粘贴到新的页面来,如果页面的数量上去了而中途公共的部分出现要修的地方.不过有上10个页面都用到了这个公共的html代码.那修改起来不是很麻烦吗? 一些其他方法比如ifram,import都不够优雅,并且源代码中的不显示的,也就不利于SEO 对于后端的同学而言,他们可以通过模版来进行拆分.这样做可以提高html代码的复用性和可…

关于gulp资料可以访问:http://www.gulpjs.com.cn/,本篇主要讲解在VS中使用gulp对js和css进行压缩合并 1.下载node.js,gulp依赖于node.js,可以访问http://nodejs.cn/下载,本人下载的4.4.4版本,下载完后进行傻瓜式安装,注意安装路径最好不要含有空格或中文 2.安装gulp以及需要的插件 1.输入命令进行安装gulp npm install --global gulp 2.安装需要用到的插件,可以选择安装 npm install…

本文重点是gulp在vscode中执行task任务的方法 如何像webstorm那样简便操作gulp 的task 第1步:安装node.下载地址:https://nodejs.org/zh-cn/ 检查是否安装成功:Windows键+R快捷键打开cmd,输入node -v查询安装的node版本,查询到版本号,才是安装成功. 第2步: 下载插件:Gulp Snippets===>主要作用就是识别gulp 下载插件Gulp Tasks==>主要是管理任务,方便执行任务 如下 第3步:gulp的配置…

在Visual Studio 2017中使用gulp编译sass/scss文件 需要的环境:Visual Studio 2017.Node.js.npm 在vs2017中 [视图]-[其他窗口]-[任务运行程序资源管理器]打开. 在学习的时候,发生网上讲的大多都是的gulpfile.js里面的核心内容,因此我这里写下我的详细操作步骤留作笔记. 步骤: 1.运行:cmd 2.运行:cd 到项目的根目录 3.运行:npm init 初始化package.json (一直Enter到底,也可以按照提示…

之前一直是在vs 2013中使用Cordova来开发移动app(目前有iPad版/iPhone版/安卓版),准备到下一个milestone的时候升级到2015,这两天在尝试各种东西. 2015中的cordova项目和2013结构变化很大,所以需要一个手动迁移过程,这个过程之前已经有同事尝试过了,包括很多插件可能都要重新安装,不同插件的使用可能还有些不太一样. 这两天在研究如何在项目里使用gulp这个前端集成工具,vs 2015支持这个东西是一个非常大的利好,之前很多事情现在都可以自动来做了. g…

AngualrJs中可用来注入的有三种类型,service.factory.provider,这三种写法不样,用法也都不一样.其中,service只实例化一次,其实就是单例模式的思想.无论我们在什么地方注入我们的service,将永远使用同一个实例.所以对很多在controller层中的操作就可以放到serivce层中去.AngularJS提供例如许多内在的服务,如:$http, $route, $window, $location等.每个服务负责例如一个特定的任务,$http是用来创建AJAX…

简介 Gulp是一个基于流的自动化构建器. 安装 npm config set registry http://registry.npm.taobao.org ---最好用国内源 npm install -g gulp npm install --save-dev gulp 创建文件 gulpfile.js var gulp = require('gulp'); gulp.task('default', function() { // place code for your default ta…

最近一段时间一直在做桌面混合应用,跟以往做web端不同的是,无法再通过在浏览器上输入内部的域名来随时跟踪开发版本的状况了,只能通过打包代码让产品或领导随时跟踪进度. 这里就涉及到一些问题了: 1,需要打包成zip文件便于传输 2,需要排除一些仅是开发中需要的文件,如node_modules,一些不必要的config等 然后,首当其冲gulp,关于gulp和grunt的比较,流式(stream)操作比较快之类的云云就不多废话了. 一,生成zip文件 使用gulp-zip插件 首先是安装 npm i…

在存在.git的目录下,按住shift+左键,打开命令行或者使用git Bash Gulp: 输入gulp dev 本地起一个服务器,在项目中找到gulp.js,然后找本地服务器,找到host和port,此种方法可自动监听修改 Host:port Webpack: 输入npm run dev 在项和目中找到tools,在console.base.config.js中找到host和port,此种方法可自动监听修改 Host:port…

下面以WeUI(微信官方网页开发样式库)介绍一下,怎么把WeUi引入到自己的项目中,我的开发环境Visual Studio 2012,当然了Visual Studio 2015对此已有了更好的支持(https://msdn.microsoft.com/magazine/mt573714),什么开发环境不重要,都一样的. 1.bower.gulp都是基于nodejs,前提是你必须已经安装好nodejs环境. 2.使用nodejs自带的包管理器npm,安装bower.gulp npm install…

简介 Gulp是一个基于流的自动化构建器. 安装 npm config set registry http://registry.npm.taobao.org ---最好用国内源 npm install -g gulp npm install --save-dev gulp 创建文件 gulpfile.js var gulp = require('gulp'); gulp.task('default', function() { // place code for your default ta…

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

因为之前一直有人给我推荐gulp,说他这里好哪里好的.实际上对我来说够用就行.grunt熟悉以后实际上他的配置也不难,说到效率的话确实是个问题,尤其项目大了以后,目前位置遇到的项目都还可以忍受.不过不管怎么说,需要亲自用过gulp之后才能品评他和grunt之间的优劣.不废话,直接上实例. 本人自建了一个前端目录结构,后续的例子都是以这个目录结构为准.dest是我们打包压缩结果保存目录,现在是空的.以后每完成一个实例,我们就会清空一下dest目录,保证下一个实例的结果和实例代码对应. 1. 第一个…

插件使用注意事项: 插件需要先 npm/cnpm install xx --save-dev gulp taskname,如果 task 已经设置成 default 的依赖,直接 gulp 即可 task 中的文件路径都是相对 gulpfile.js 的 gulp.dest() 指向的目录不存在,会被创建 task 中的 gulp.src 前记得加上 return(注意我下面的示例很多并没有加).为什么要加参考 Gulp 入门 中 「6. API 参考」src 一节 JS 压缩.合并.重命名 l…

1. 安装 Node 环境 参考 http://www.cnblogs.com/zichi/p/4627728.html,注意一起安装 npm 工具,并把路径保存到环境变量中(安装过程中会有提醒) 安装完后,用如下命令测试: node -v npm -v 2. 全局安装 gulp npm install gulp -g 这里有个误区,全局安装某个包,并不是说在任意文件中都能将它 require 进来而不报错,而是将其集成到了命令行中,我们能在命令行中使用 gulp taskname 这样的命令.…

前端构建工具gulpjs的使用介绍及技巧 gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快.如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧. 本文导航: gulp的安装 开始使用gulp gulp的API介绍 一些常用的gulp插件 1.gulp的安装 首先确保你已经正确安装了nodejs环境.然后…

之前搭建过Grunt,但是用起来有点繁琐,后来有人跟我说gulp更多简单.所以今天又搭建一个gulp.在使用gulp前应该有nodeJs环境,安装完nodejs后,就可以开始gulp的搭建了. 先新建一个文件夹test,如下: 然后打开Node.js命令窗口,进入test文件夹 在test文件夹中新建gulpfile.js 在nodeJs命令窗口中先安装后需要用到的插件: npm install gulp-connect --save-dev npm install gulp-concat --…

gulp基于node 1.全局安装gulp: $ npm install --global gulp 2.前往项目目录,然后安装作为项目的开发依赖(devDependencies): $ npm install --save-dev gulp 3. 在项目根目录下创建一个名为 gulpfile.js 的文件: var gulp = require('gulp'); gulp.task('default', function() { // 将你的默认的任务代码放在这 console.log("he…

一.构建gulp环境 1.下载nodejs gulp基于node.js,要通过nodejs的npm安装gulp,所以要先安装node.js环境.(英文官网/中文官网链接). 通过cmd命令窗口确定安装node.js.(在命令窗口输入node -v或npm -v 查看是否返回出版本号). 2.全局安装gulp 确定正确安装了nodejs环境,然后通过命令全局方式安装gulp: npm install gulp -g 或者 cnpm install gulp -g 二.项目流程 1.生成项目所需信息…

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

gulp 了解 首先我们了解一下什么是gulp, gulp是前端自动化构建工具,在开发过程中很多重复的任务,我们都可以正确的使用gulp来完成,gulp基于nodejs,使用gulp可以做很多事情 例如gulp转less语法,js压缩,css压缩,html压缩,下面我大体说一下这个gulp的主流程 gulp 官网 gulp插件 中文网 gulp的主流程 首先你要安装nodejs环境. 全局安装gulp,然后你每次使用gulp的项目中还要安装一下gulp以及你在项目中所用到的插件也安装好. 然后你…

Gulp和所有Gulp插件都是基于nodeJs来运行的,因此在你的电脑上需要安装nodeJs,安装过程请移驾安装并配置前端自动化工具--grunt.安装完成后,通过运行cmd进入DOS命令窗口,如图: 如上图,输入node -v然后回车,看到有版本号,证明nodeJs安装成功. 接下来就是安装Gulp了: 1.首先进行全局安装gulp,如图: 安装完成后,输入gulp -v然后回车,看到有版本号,证明gulp安装成功. 2.在你的项目中安装作为项目的开发依赖(devDependencies),如…

一.概述&安装 Gulp,简而言之,就是前端自动化开发工具,利用它,我们可以提高开发效率. 比如: 1.  压缩js 2.  压缩css 3.  压缩less 4.  压缩图片 等等… 我们完全可以利用Gulp来自动化地完成这些重复性很强的工作. 好了,废话不多说了.既然要了解Gulp,就得先安装它. Gulp是基于node来实现的,so你得先有个node环境(见“初探nodeJS”). node环境有了后,安装Gulp就很easy咯. 命令行中,输入npm install gulp –g就OK…

前端自动化构建工具gulp的使用总结 博主最近偶的空闲,在此对gulp的使用做一个总结,让小伙伴知道如何合理的使用gulp以及gulp的使用技巧. 谈到gulp,有人可能就会想到另外一个构建工具grunt,那么 博主就要夸你一句:油啊热瘪死他. 那么grunt和gulp有什么异同点呢? 1.易于使用:采用代码优于配置策略,Gulp让简单的事情继续简单,复杂的任务变得可管理. 2.高效:通过利用Node.js强大的流,不需要往磁盘写中间文件,可以更快地完成构建. 3.高质量:Gulp严格的插件指导…

Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 1.搭建web服务器 2.文件保存时自动重载浏览器 3.使用预处理器如Sass.LESS 4.优化资源,比如压缩CSS.JavaScript.压缩图片 当然Gulp能做的远不止这些.如果你够疯狂,你甚至可以使用它搭建一个静态页面生成器.Gulp真的足够强大,但你必须学会驾驭它. 这是这篇文章的主要目的.帮助你了解Gulp的基础用法,助你早日完成一统天下的大业. 我们将要做的 这篇文章的最后,你会拥有简单的一个工作流: 编译Sass…

前段时间使用了gulp+browser-sync才发现这个东西真的很好用. 准备工作:(1).安装nodejs.gulp是基于nodejs使用的,所以先安装nodejs,https://nodejs.org/en/download/在这里直接下载安装就好. (2).新建一个项目目录,比如我在E盘中新建一个文件夹:gulpbrowsersync  .在其中新建一些文件夹或者文件比如style文件夹.js文件夹.images文件夹以及index.html, 开始工作: 1.进入项目目录E:\gulp…

前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://github.com/lisposter/gulp-docs-zh-cn Gulp插件网 http://gulpjs.com/plugins/ Awesome Gulp https://github.com/alferov/awesome-gulp StuQ-Gulp实战和原理解析 http://i5…

一.gulp是什么 gulp就是用来机械化的完成重复性质(如less->css:js.css压缩:js混淆)的工作:gulp的机制就是将重复工作抽象成一个个的任务. 二.gulp使用 a.首先确保电脑上已经正确安装了node环境: b.其次再全局安装gulp,命令行语句:npm install -g gulp: c.在项目根目录下添加一个gulpfile.js文件,这个是gulp的主文件,这个文件名是固定的:d.在gulpfile中抽象我们需要做的任务. 小案例: 'use strict'; /…