gulp watch 命令

玩转gulp之watch监听文件自动编译

博客移至 https://www.dodoblog.cn/blog?id=5befc928e0feb34495b57035 我们在写页面的时候,用到sass less等css预处理器的时候,虽然写的很爽,但是有一个麻烦就是老是要不停的去编译文件例如我们写一个variable.scss时,希望引入这个scss文件的index.scss list.scss都发生变化.可能还有很多很多.那我们应该怎么做呢还有如果我们希望html变化了就重新编译一下scss 诸如此类,ok我们现在就开始着手解决问题

gulp常用命令

gulp 默认的执行的命名文件为gulpfile 换成其他命名就识别不了因为需要安装两次gulp或者说其他插件,一个是全局-g安装一个是本地目录安装, 本地目录安装时目录移动或者名字被改变就会失效提示找不到目录,本地重新装一次就可以了几个常用api task 任务命令 dest 复制命令 pipe 管道,在这个里面进行一些动作例如 pipe(gulp.dest('目录名')) gulp 初始化 require(‘glup’) 根命令 gulp.run(tasks...):尽可能多的并行运行

zsh: command not found cnpm,gulp等命令在zsh终端上报错的问题

以cnpm包为例,使用 npm install -g cnpm 创建了cnpm包.而在zsh终端上运行cnpm,出现 zsh: command not found: cnpm 的报错.同样的,gulp等也出现同样的报错. 这是什么原因?在.zshrc文件加入 export PATH=~/.npm-global/bin:$PATH 后得到解决.而.profile文件中已有这样的设置.这说明,zsh运行时,没有读取.profile内容. 参考资料: http://stackoverflow.com/

Gulp安装流程、使用方法及cmd常用命令导览

Gulp安装流程.使用方法及CMD常用命令导览来自前端小白的gulp及周边知识学习总结一.名词介绍: Npm--node包管理工具一开始我不理解,包管理工具是什么鬼.后来用到的gulp也好,gulp的插件包也好,都是要在npm这个里边弄出来的. 可以理解为,一个硬盘,里边放的各种整理好的.适用于各种功能的且不重复的文件夹(插件),然后我们需要啥,就去里边摘下来. 当然也可以用它来删除插件 //反正基于他的命令语句就有很多,常用的我先搞到这里 //其他相应的放到相应上下文中好了,本来打算单独

执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案（二）

前言文章在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 window 系统的 CMD 命令行工具.本节主要围绕如何使用 Gulp 完成一个预编译 SASS 文件的任务来逐步熟悉 Gulp . 本文地址:http://www.cnblogs.com/leonkao/p/4611102.html 相关连接导航在windows下安装gulp —— 基于

gulp-uglify 与gulp.watch()配合使用时遇到的重复压缩问题

今天学习gulp时候,用到gulp-uglify压缩js模块,遇到的一个问题-当用gulp.watch来监听js文件的变动时出现重复压缩的问题目录结构如下: gulpfile.js代码如下: var gulp = require('gulp'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename'); gulp.task('uglify', function() { gulp.src('./src/js

Gulp 入门

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

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

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

前端自动化构建工具gulp的使用总结

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

gulp安装说明

1.安装node-v6.3.0-x64,安装成功后再点击node-v6.3.0-x64卸载(点击remove). 2.安装node-v4.4.7-x64. 3.打开cmd命令行,输入node -v,查看下版本,如果有显示版本,说明已经安装成功. 4.输入npm -v,查看下npm的版本,如果有显示版本,说明已经安装成功. 5.输入npm install -g gulp命令,安装全局的gulp. 6.安装好后输入gulp -v查看版本,如果有显示版本,说明已经安装成功. 7.在C盘新建个项目,在项

前端构建工具：gulp的配置与使用

安装gulp 因为gulp是基于node的管理工具,所以要先安装nodejs安装nodejsnodejs下载地址:中文站:http://nodejs.cn/ 英文站:https://nodejs.org/en/下载后直接运行.msi文件安装完成后,打开命令行(win+R)键入node -查看node版本全局安装gulp npm install -g gulp 在项目目录下安装gulp,若要在安装的时候把gulp写进项目package.json文件的依赖中,则可以加上–save-dev:(项目目

Scales小谈gulp

gulp是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务. 外网:http://gulpjs.com/ 中文官网:http://www.gulpjs.com.cn/ 易于使用通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理. 构建快速利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作. 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 易于学习通过最少的 API,掌握 Gulp 毫不费力,构建工作尽

gulp基本介绍

一.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'; /

gulp 基本使用

1, gulp 依赖node, 使用gulp 之前,要先安装node. Node 安装完成后,它自带npm. Npm: node package manager 就是node 包管理器. 用过java 的就知道,java 有许多包,我们使用一个包的时候,要先引入 import 这个包.Node 也是一样,当我们使用一个包时,就需要先安装它, npm install 包名. 2, Node 安装完成, 按window +r 组合键,调用运行窗口,输入cmd, 打开windows 自带的命令窗

gulp 使用介绍

gulp 使用介绍 gulp gulp 插件 gulp的配置文件gulpfile.js gulp 语法 gulp 实例 gulp的缺点 gulp gulp是基于Node.js的前端自动化构建工具,主要用于代码打包.目前主流的前端打包工具,grunt,gulp,webpack.grunt现在似乎慢慢被gulp取代,而我使用gulp也是冲着大家说的配置简单去的,至于通道流,运行文件什么的其实还是次要的:webpack现在很火,听说功能强大,没有用过. npm install gulp -g 注意需要

react-router+webpack+gulp路由实例

背景:新项目要开始了,有一种想要在新项目中使用react的冲动,应该也是一个单页面的应用,单页应用就涉及到一个路由的问题.于是最近在网上找了蛮多关于react-router的文章,也遇到了许多的坑,经过不懈的探求之后,今天终于搞出了个成功的demo......特此记录 1.项目结构本demo采用react+webpack+gulp的组合进行开发,主要的js文件app.js放在js这个目录下. index.html的结构如下: <!DOCTYPE html> <html lang=&qu

从零开始用gulp

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

gulp：更简单的自动化构建工具

目前最流行的两种使用JavaScript开发的构建工具是Grunt和Gulp.为什么使用gulp?因为Gulp更简单.Grunt任务拥有大量的配置,会引用大量你实际上并不需要的对象属性,但是Gulp里同样的任务也许只有几行.有兴趣的同学在学完本文后对比使用Grunt,你就会发现Gulp的代码量是最少的. 安装需要先安装node.js.这里安装的v5.11.0. 使用node -v查看版本号. gulp的安装不是很顺利.按照官方给的安装方法: npm install --global gulp

gulp 压缩js,css

最近做的前端项目中发现引用的js包太多,导致页面加载时反应很慢,所以首先想到的是将js和css压缩,提高加载速度. 我们先来看看抓到的当前页面响应时间: 页面异步加载,需要响应时间 7.41秒,这也太慢了,实在受不了了. 下面我们引入gulp 对js做压缩,gulp是基于Node.js的前端构建工具.所以首先需要安装nodejs ,因为我的项目本身就是node项目,所以直接装gulp就好.全局安装gulp,命令如下 npm install -g gulp 需要安装的依赖项下面这些,依次安装就好了

Gulp.js----比Grunt更易用的前端构建工具

Gulp.js----比Grunt更易用的前端构建工具 Grunt一直是前端构建工具,然而他也不是毫无缺陷的,gulp的作者 Eric Schoffstall 在他介绍 gulp.js 的 presentation 中总结了 Grunt 的几点不足之处: 插件很难遵守单一职责.因为 Grunt 的 API 设计缺憾,使得许多插件不得不负责一些和其主要任务无关的事情.比如说要对处理后的文件进行更名操作,你可能使用的是 uglify 插件,也有可能使用的是 concat 插件(取决于工作流的最后一个

gulp学习笔记2-安装

安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 1.去nodejs官网安装nodejs 2.打开命令行,OSX是终端,windows是命令提示符(window + r 输入cmd回车) 3.使用npm(nodejs的包管理器),或选装cnpm执行npm install cnpm -g --registry=https://registry.npm.taobao.org 4.全局安装gulp:(c)n

gulp watch 命令

热门专题