按照gulp中文文档对gulp基础操作的一些实践练习,记录以防忘掉. 一,选择并输出文件:gulp.src(globs[,options]) eg:gulp.src('src/less/index.less') 这是一个最简单的表达式,它选中并且输出'src/less'目录下的index.less文件. 接下来我们来看它的官方解释:输出符合所提供的匹配模式或者匹配模式的数组的文件.返回一个vinyl files的stream它可以被piped到别的插件中. glob:Match files us…

1.什么是gulp? gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器. 2.为什么使用gulp? gulp不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成,提高我们的工作效率. 3.gulp介绍? gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试.检查.合并.压缩.格式化.浏览器自动刷新.部署文件生成,并监听文件在改动后重复指…

gulp 安装 1 检测电脑有没有安装node 执行 $ node -v $ npm -v 如果没有安装的话,可以到https://nodejs.org/en/download/下载安装. 2 全局安装gulp $ npm install --global gulp 3 给对应的项目安装gulp 执行 $ npm install gulp --save-dev 4 初始化项目目录 执行 $ npm init 生成 package.json 在对应的根目录下创建 gulpfile.js 文件中的基…

全局安装gulp $npm install --global gulp 作为项目的开发依赖安装 //--save-dev 开发依赖,储存在package.json的devDependencies中,如gulp,grunt //--save 发布之后的依赖,储存在package.json的dependencies中,如jquery,angular $ npm install --save-dev gulp 在项目下创建一个gulpfile.js文件 var gulp = require('gulp…

首先,我们需要了解Gulp能做些什么? 编译 sass                                        sass是什么?(使CSS可以用编程的方式写,加快我们开发的速度) 合并优化压缩 css 校验压缩 js 优化图片 添加文件指纹(md5) 组件化头部底部(include html) 实时自动刷新- 总之Gulp就是帮助前端开发中对代码自动化的构建,可以对开发中许多重复的操作进行自动化,使我们可以更加专注于代码,提高工作效率,还可以对资源进行优化(简直强到爆炸).…

1.安装 全局安装 npm install --global gulp 作为项目的开发依赖安装 npm install gulp --save-dev 2.在根目录下创建一个名为gulpfile.js的文件 let gulp = require('gulp'); let cleanCSS = require('gulp-clean-css');//css 打包 let concat = require('gulp-concat');//文件整合 let uglify = require('gul…

提示:路径中不允许出现中文,否则scss编译会出错,大概. 按照惯例,先检查一下Node.js.npm(cnpm).gulp的版本号 1.新建package.json 我们可以通过手动新建这个配置文件  也可以通过执行 npm init package.json是基于nodejs项目必不可少的配置文件,它是存放在项目根目录的普通json文件 2.通过更改package.json来安装各种需要的插件,而我的方案则是 { "name": "xueweijie", &qu…

写这篇文章的目的是为了以后的项目中懒得再去配gulp,直接可以拿这篇博客中的来用,因为有时候配置还是挺烦人的. gulp相关插件的介绍 用法比较简单,假设大家都会用gulp,下面主要介绍一下一些插件的用途 1.del 删除文件,用于清空文件 2.browser-sync 用于自动刷新浏览器,从此再也不用F5手动刷新了 3.gulp-htmlmin 用于压缩html 4.gulp-clean-css 压缩css 5.gulp-uglify 压缩js 6.gulp-replace 替换路径 7.gu…

包括了less预编译,css压缩,html文件include引入,js混淆压缩,本地开发热刷新服务器,html压缩,版本号添加 github地址: gulpfile.js var gulp = require('gulp'), //基础库 imagemin = require('gulp-imagemin'), //图片压缩 less = require('gulp-less'), // less minifycss = require('gulp-minify-css'), //css压缩 f…

安装gulp 假设已经安装了node 和npm (淘宝的cnpm很适合国内使用). 1.首页全局安装gulp. 1 npm install --global gulp 2.其次局部安装gulp.(注:局部安装是安装到你项目的根目录,这是很多教程没有清晰表明) npm install gulp --save-dev 3.在项目根目录下创建一个名为 gulpfile.js 的文件 var gulp = require('gulp'); gulp.task('default', function()…

原文:http://www.dbpoo.com/getting-started-with-gulp/ 所有功能前提需要安装nodejs(本人安装版本v0.10.26)和ruby(本人安装版本1.9.3p484). Gulp 是一款基于任务的设计模式的自动化工具,通过插件的配合解决全套前端解决方案,如静态页面压缩.图片压缩.JS合并.SASS同步编译并压缩CSS.服务器控制客户端同步刷新. Gulp安装 全局安装Gulpjs npm install -g gulp  #全局安装 局部安装Gulpj…

前端项目需要的功能: 1.图片(压缩图片支持jpg.png.gif) 2.样式 (支持sass 同时支持合并.压缩.重命名) 3.javascript (检查.合并.压缩.重命名) 4.html (压缩) 5.客户端同步刷新显示修改 6.构建项目前清除发布环境下的文件(保持发布环境的清洁) 通过gulp plugins,寻找对于的gulp组件 gulp-imagemin: 压缩图片 gulp-ruby-sass: 支持sass gulp-minify-css: 压缩css gulp-jshint…

cmd小技巧: 1.换到下级或同等级目录 D: 2.换到上级目录 cd.. node 包管理器小技巧[以gulp为例] npm install --save-dev gulp gulp-concat gulp-minify-css gulp-rev gulp-rev-collector 等等插件 gulpfile.js中的代码 var gulp = require('gulp'), //基础库 clean = require('gulp-clean'), //清空文件夹 minify = req…

第一步:node.js安装 在gulp安装之前,本机需要node环境.访问http://nodejs.org,然后点击大大的绿色的install按钮,下载完成后直接运行程序.npm会随着安装包一起安装,稍后会用到它. 为了确保node.js和npm已安装,请在命令行中输入以下命令: node -v npm -v 这两个命令,用于显示node或npm的版本.确定这两个安装后,可进行下一步 第二步: gulp 安装 安装全局的gulp npm install -g gulp 如果ios安装不上,请在…

上一篇  介绍了gulp的安装.环境等配置.基本使用,那么现在,我们快走进 速8,深入了解吧...... 一.各种安装.环境配置.插件安装(参考上一篇文章) 二.项目基本目录结构 三.编写 gulpfile.js 文件 gulp通过gulpfile.js文件来完成相关任务 示例目录 gulpfile.js //引入gulp及组件 var gulp = require('gulp'), //基础库 htmlmin = require('gulp-htmlmin'), //压缩html rev =…

为了防止客户端的静态资源缓存,我们需要每次更新css或js的时候,通过md5或时间戳等方式重新命名静态资源.让客户端可以重新请求资源,而不是从缓存里取.然后html模板里的src也要做相应的修改.当然,这里还有个附加的需要就是,静态资源需要自行优化(压缩合并). 下面是我gulpfile.js的代码: var gulp = require('gulp'), //基础库 clean = require('gulp-clean'), //清空文件夹 minify = require('gulp-mi…

最近研究了一下gulp构建工具,发现使用起来比grunt顺手一些.(个人感受),以下是grunt和gulp构建方式和原理: grunt 基于文件方式构建,会把文件先写到临时目录下,然后进行读文件,修改文件,写文件,,,读文件,修改文件,写文件..... 需要进行大量IO操作. gulp 基于流(streaming)的方式构建,首先读取文件,编译压缩文件(流的方式),最终将结果生成到配置的文件目录下. 安装gulp 假设已经安装了node 和npm (淘宝的cnpm很适合国内使用). 1.首页全局…

Gulp 是一款基于任务的设计模式的自动化工具,通过插件的配合解决全套前端解决方案,如静态页面压缩.图片压缩.JS合并.SASS同步编译并压缩CSS.服务器控制客户端同步刷新. Gulp安装 全局安装Gulpjs npm install -g gulp  #全局安装 局部安装Gulpjs npm install gulp --save-dev # 局部安装 全局安装1. 将安装包放在 /usr/local 下2. 可以直接在命令行里使用 本地安装1. 将安装包放在 ./node_modules…

1.首先需要安装node+npm(这里不再叙述,网上教程一大堆) 2.gulp全局安装:npm install -g gulp 3.cd进入到你的项目目录,这里使用demo文件夹为我的示例项目 4.在demo项目中新建dist和src两个文件夹,再在src文件夹下新建images,sass,js三个文件夹和index.html文件 5.命令行cd进入到项目根目录,在项目中安装gulp模块,npm install gulp 6.安装gulp相关需要模块 npm install gulp-util…

将之前的东西的理论部分整理了一下—— gulp 前端构建工具 它可以帮助我们完成一些自动化操作 它需要一些插件的支持 var gulp = require('gulp'); --> gulp命令 require('yargs').argv; 它可以监听gulp后面添加的参数 关闭 gulp 服务器: 执行 ctrl + c var less = require('gulp-less'); -->> less预处理器,目的就是把 .less文件转换成普通css文件 var header =…

gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试.检查.合并.压缩.格式化.浏览器自动刷新.部署文件生成,并监听文件在改动后重复指定的这些步骤.在实现上,她借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单. gulp 和 grunt 非常类似,但相比于 grunt 的频繁 IO 操作,gulp 的流操作,能更快地更便捷地完成构建…

这几天简单的研究了一下gulp的用法,gulp对于初学者来说还是很友好的. 官方给出gulp的优点如下: 1.通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理. 2.Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 3.利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作. 4.通过最少的 API,掌握 Gulp 毫不费力,构建工作尽在掌握:如同一系列流管道. gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对…

随着React.Angular2.Redux等前沿的前端框架越来越流行,使用webpack.gulp等工具构建前端自动化项目也随之变得越来越重要.鉴于目前业界普遍更流行使用webpack来构建es6(ECMAScript 2015)前端项目,网上的相关教程也比较多:相对来说使用gulp来构建es6项目的中文教程就比较少. 经过一段时间的摸索,我觉得其实使用gulp也可以很方便地构建es6项目.以下是我感觉gulp和webpack主要的不同之处: gulp的任务机制和流式管道函数和webpack的…

写这篇文章的目的是为了以后的项目中懒得再去配gulp,直接可以拿这篇博客中的来用,因为有时候配置还是挺烦人的. gulp相关插件的介绍 用法比较简单,假设大家都会用gulp,下面主要介绍一下一些插件的用途 1.del 删除文件,用于清空文件 2.browser-sync 用于自动刷新浏览器,从此再也不用F5手动刷新了 3.gulp-htmlmin 用于压缩html 4.gulp-clean-css 压缩css 5.gulp-uglify 压缩js 6.gulp-replace 替换路径 7.gu…

git push origin master/chunxiong git remote -v git merge chunxiong working tree:就是你所工作在的目录,每当你在代码中进行了修改,working tree的状态就改变了. index file:是索引文件,它是连接working tree和commit的桥梁,每当我们使用git-add命令来登记后,index file的内容就改变了,此时index file就和working tree同步了.commit:是最后的阶段…

在对Gulp有了一个初步的了解之后,我们开始构建一个较为完整的Gulp开发环境. 本文主要分为6个段落: 1. 构建项目目录结构(Directory Structure Build) 2. 插件介绍及使用方法(Tasks and dependencies) 3. 扩展优化(Extend & Optimize Task) 4. 其他插件介绍(Other plug-ins) 5. 匹配规则(Match Files) 6. 注意事项(Attention) 关于Gulp的入门介绍及安装方法,可先去 <…

简介:node express或者就是node项目中,要自动编译sass方法很多,比如gulp 比如考拉,比如今天我想说的这个包node-compass. 编译sass的三种方法: 前提条件: 都需要电脑中安装好ruby和compass. 方法一: 命令行编译sass: 方法二:gulp-sass 方法三:node-compass 方法一: 命令行编译sass: compass compile 回车确认即可生成对应的css代码.新生成的css文件与sass文件在同一目录下.这是最基础的sass编…

gulp例子:https://github.com/Aquarius1993/gulpDemo 淘宝镜像:$ npm install -g cnpm --registry=https://registry.npm.taobao.org   一 入门:          npm: node package manager(前提是安装了node)           1.1 全局安装   npm install --global gulp           1.2 作为项目依赖安装  npm in…

博主不易,不求赞赏,希望把自己遇到的难点写出来,以及希望自己能有能力写出一篇不错的博文. 前端构建工具本人 bootstrap+jquery用gulp vue+element 用webpack 引文 现在,移动端开发的火爆,以及前端工程越来越复杂,所以出了很多的自动化构建工具.gulp等就是最好的代表,如果你是前端新手初次接触gulp,又不想看太官方的解释又想学习学习gulp的相关知识的话那么这篇文章很适合你,喜欢的话也希望你们可以点个赞,不喜欢的也不要喷,毕竟我也不是前端大牛,只是想把自己使用…

gulp用于自动化和提高工作流,类似于grunt.gulp适用于nodejs平台.   gulp基础: gulp两个主要的功能是读取想要处理的文件,把处理好的文件放到指定的地方gulp.src()找出我们需要处理的文件.pipe()用于处理这些被gulp.src()找出来的文件,他类似于管道,可以指定他的功能.pipe(gulp.dest())将处理好的文件放到指定的地方,gulp.dest()的括号里面用于填写指定的位置以上的几步合在一起就相当于一个复制的功能.将一个文件复制到另一个地方,源文…