昨天听同事分享了Gulp的一些简单使用,决定自己也试一试. 一.安装 gulp是基于nodejs的,所以要先下载安装node(直接搜node,在官网下载就好了) 1.全局安装gulp npm install gulp -g 2.新建package.json文件 npm init 上图框中的内容分别是:项目名.版本.描述.入口文件.测试命令.git地址.关键字.作者.许可协议 3.作为项目的开发依赖(devDependencies)安装gulp npm install gulp --save-de…

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

一个月没写博客了,今天有时间,就写个gulp的入门使用吧.. 简介:gulp是一个前端自动化构建工具,可以实现代码的检查.压缩.合并……等等,gulp是基于Node.js的自动任务运行器 一.安装Node 去Node官网下载安装,由于5.0版本的改变比较大,下载4.2.2稳定版即可 以下操作都是在命令行环境中执行: node -v //可查看安装Node的版本号,有即为安装成功 二.通过npm安装Gulp npm(node package manager)nodejs的包管理器,用于node插件…

gulp是基于流的前端自动化构建工具. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到某一工程目录下 跟grunt一般,也是需要package.json包依赖文件和一个入口文件 gulpfile.js(其他名字识别不了) 然后就类似的先装上gulp npm install gulp --save-dev 最基本的使用方式是这样:(使用jshint插件校验js代码) var jshin…

项目上线也有一阵子,回头过来看了看从最初的项目配置到开发的过程,总有些感慨,疲软期,正好花点时间,看看最初的配置情况 随着前端的发展,前端工程化慢慢成为业内的主流方式,项目开发的各种构建工具,也出现了不少,如:grunt,gulp,webpack,百度团队的fis3等,在前端的领域都占有自己的一席之地,webpack可以说是后起之秀,加之vuejs,reactjs,angularjs等MVVM框架的出现,配合webpack开发,成为业内常见的一种开发模式 在公司项目开发的时候,选用了gulp+w…

前端构建工具的作用可以认为是对源项目文件或资源进行文件级处理,将文件或资源处理成需要的最佳输出结构和形式. 在处理过程中,我们可以对文件进行模块化引入.依赖分析.资源合并.压缩优化.文件嵌入.路径替换.生成资源包等多种操作,这样就能完成很多原本需要手动完成的事情,极大地提高开发效率. 一.Gulp Gulp 是一个基于流的自动化构建工具.除了可以管理任务和执行任务,还支持监听文件.读写文件.Gulp 被设计的非常简单,只通过下面5个方法就可以支持几乎所有构建场景: 通过 gulp.task 注册…

一.我对gulp的初期理解 是一种前端辅助开发工具 可以帮你把js,css,img等文件 合并.压缩,图片好像是合并为精灵图,合并为精灵图之后,还会生成一个css样式表. 官方解说是:基于流的自动化构建工具. 基于流:应该就是他的语法方式有点像jquery 那样 如: $(".active").css("background":"red").addClass("default");像这样一直点点下去.前一个表达式的输出作为后一…

gulp是前端工程化的工具,它可以对html,css,js等代码和图片进行压缩,也可以对sass和less等预处理语言进行编译,代码部署.gulp学起来简单,用起来方便,大大提高我们工作效率. 这里可以参考CTOLib码库的gulp基本教程 ||<gulp中文网> 安装node.js 因为gulp是基于node.js的,所以先要安装一下node.js.在网页中打开node官网安装就可以:https://nodejs.org/en/ 使用命令行 小编习惯用git的命令工具,当然我们可以使用Win…

一.安装 1)安装nodejs 通过nodejs的npm安装gulp,插件也可以通过npm安装.windows系统是个.msi工具,只要一直下一步即可,软件会自动在写入环境变量中,这样就能在cmd命令窗口中直接使用node或npm指令.…

gulp 和grunt这两个是我知道的自动构建工具,但是说实话都没在项目中用过,不太清楚自动化构建是什么意思, 1.grunt和gulp有什么相同点和不同点? (1).易于使用:采用代码优于配置策略,gulp让简单的事情继续简单,复杂的任务变得可管理: (2).高效:通过利用Node.js强大的流,不需要网磁盘写中间文件,可以更快地完成构建: (3).高质量:gulp严格的插件知道发昂真,确保插件简单并且按照你期望的方式工作: (4).易于学习:通过把API降到最少,你能在很短的时间内学会gul…

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

一.简介及安装: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率 gulp的优点:基于流的操作.任务化. 常用api:src .dest.watch.task.pipe 由于gulp是基于node的所以使用的时候需要通过npm或者cnpm安装全局安装(cnpm i -g gulp) 常用的gulp需要安装的包括gulp-cl…

1.gulp的安装 首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp: npm install -g gulp 全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次.把目录切换到你的项目文件夹中,然后在命令行中执行: npm install gulp 如果想在安装的时候把gulp写进项目package.json文件的依赖中,则可以加上--save-dev: npm install --save-dev gulp 这样就完成了gulp的安装.至于为什么在全局安装…

1. 全局安装 gulp: $ npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装: $ npm install --save-dev gulp 3. 在项目根目录下创建一个名为 package.json 的文件: 附上本人项目基本配置 { "devDependencies": { "concat": "0.0.1-security", "gulp": "…

很久没有更新博文了. 经过了一次年前吐血的赶项目,终于在年后回血了.趁着有空,新学到了一个前端自动化构建工具-gulp. 现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gulp? 3.怎么用?   什么是gulp 答:是一个前端自动化的构建工具,直白点说,如果没有这个工具,我们利用人工依旧可以做到以下优点,但是在项目逐渐庞大的时候,采用这个工具,可以提升性能和效率.   为什么要用gulp? 答: 1.js和css属于静态文件,很多时候浏览器存在缓存机制,为了避免缓存带…

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

如今随着前端技术的飞速发展,前端项目也变得越来越复杂. 快速的搭建一个集成多种工具和框架的复杂前端项目也越来越成为一种需求. 当然如果你要自己从0开始完全自己diy,绝对可以,只不过需要耗费一些不少的时间. 既然如此要是有自动化的项目构建工具,帮你生成各种必须的配置项,你只需愉快的写代码该多方便呀. 嗯,是的这样的工具或者说脚手架确实是有的,就是下面要提到的eoman.来吧,一起看一下如何使用这个工具让你的项目秒建吧. 初识yeoman yeoman是什么 yeoman是Google领头开发的一…

曾几何时还在使用grunt作为前端的构建工具,直到有一天同事向我推荐了gulp,在这里博主将不讨论gulp与grunt各自优势的比较,只为大家介绍gulp如何安装和使用. Gulp 是用 nodejs 写的一个前端构建工具,他可以对sass.js.html.coffee等进行编译,并且提供了很多的插件,稍后会为大家介绍. windows上的安装方法: 1.下载node-v0.10.29-x64.msi 提取码:kj9b并安装 2.运行cmd,在全局环境下安装gulp npm install -g…

现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gulp? 3.怎么用?   什么是gulp 答:是一个前端自动化的构建工具,直白点说,如果没有这个工具,我们利用人工依旧可以做到以下优点,但是在项目逐渐庞大的时候,采用这个工具,可以提升性能和效率.   为什么要用gulp? 答: 1.js和css属于静态文件,很多时候浏览器存在缓存机制,为了避免缓存带来的误会,可以利用构建工具,给每一个静态文件添加一个版本号,这样浏览器就会认为是新的文件,就不存在缓存机制. 2.性能优化…

(1)新建项目目录gulp_web (2)项目目录下建目录src里面存放需要进行gulp处理的文件目录及文件 (3)gulpfile.js文件内容为声明需要打包应用的gulp组件及打包文件路径和打包任务,比如: // 引入 gulp var gulp = require('gulp'); // 引入组件 var jshint = require('gulp-jshint'); var less = require('gulp-less'); var concat = require('gulp-…

项目构建 一个项目是由多个开发者共同开发一个项目,各负责不同的模块,这就会造成一个完整的项目许多‘代码片段’组成,合并css.javascript,压缩html.css.javascript.images可以加速网页打开速度,提升性能:但是一系列的任务完全靠手动完成是很费时间成本的,使用gulp--自动构建就能将这些代码片段重组整合一下. 所谓的构建工具是指通过简.单配置就可以帮我们实现合并.压缩.校验.预处理等一系列任务的软件工具.常见的构建工具:Grunt.gulp.webpack.F.I.…

相关网站 gulp官方网址:http://gulpjs.com gulp中文网站:http://www.gulpjs.com.cn/ gulp插件地址:http://gulpjs.com/plugins gulp 官方API:https://github.com/gulpjs/gulp/blob/master/docs/API.md gulp 中文API:http://www.ydcss.com/archives/424 一.gulp特点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任…

前言 之前学完html的基础后就去学js框架了,每次都是用脚手架搭好的文件,在无形中体验了一波前端自动化带来的方便.然后前一段时间才开始学习前端自动化. 基本介绍 gulp说得简单一点就是一个自动化把前端的各种工具以流的方式一步一步的按照设置的规定加载的一个管理工具 装载 首先全局安装gulp npm install --global gulp 然后你需要在根目录下创建一个名为gulpfile.js的文件 这个文件是gulp命令需要加载的文件,通过这个文件来处理预设的构建 使用 首先你可以在你的…

目的:  模块化开发,组件化开发,让代码符合开发规范,更高效 webpack作用:从pack,就知道这是包的意思,比较专业点叫做前端自动化打包构建工具,代码错误检查,预处理,文件合并(打包),代码压缩, 将各种文件包括es6de 文件转化成es5的可以被浏览器识别的文件. webpack安装: 1.node下载安装,最好有git,可以利用git的命令行窗口. node和webpack啥关系呢?为什么要求要有node环境???? webpack官网安装说明:在开始之前,请确保安装了 Node.js…

博主不易,不求赞赏,希望把自己遇到的难点写出来,以及希望自己能有能力写出一篇不错的博文. 前端构建工具本人 bootstrap+jquery用gulp vue+element 用webpack 本人最近写的一个vue项目的目录结构 一:package.json { "name": "szhong", "version": "1.0.0", "description": "这是三中建材官网"…

一.了解Gurnt(http://www.open-open.com/lib/view/open1433898272036.html) Grunt 是一个基于任务的JavaScript工程命令行构建工具. Grunt和Grunt插件,是通过npm安装并管理的,npm是Node.js的包管理器. 了解Grunt前,首先要准备两件事: 1.了解npm(Node Package Manager):npm是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准. 2.安装nod…

目录 1. gulp使用步骤 1.1 安装Node.js 1.2 全局安装gulp 1.3 安装项目依赖包gulp 1.3.1 了解package.json 1.3.2 根据package.json安装gulp依赖 1.3.3 npm安装gulp依赖 1.3.3 创建gulpfile.js 1.3.4 运行任务 2. gulp API 2.1 gulp.task( name[, deps], fn ) 2.2 gulp.watch( glob[, opts], tasks ) 2.3 gulp.…

gulp是一个自动化的前端工具.它可以利用自身的插件来实现一些功能,如sass.less编译:浏览器自动刷新,文件压缩.重命名.代码校验(个人使用sublime的插件进行校验)等功能.当然这些功能也可以通过其他手段来实现,但是gulp实现的功能比较全面.快速.而且具有选择性(每个人都可以利用它来实现自己需要的功能). 1.gulp安装 1)首先安装node环境 2)node全局安装gulp(npm install -g gulp),如果安装不上可使用淘宝镜像(cnpm install -g gu…

把之前用到的gulp总结整理下,有时候说不出来的,就写出来吧,做个笔记,以后也可以慢慢补充 cnpm i --save-dev gulp 把nodejs模块写到package.json配置文件中,当保存到git仓库时,只需保存package.json即可 用到的gulp模块有:gulp-clean/gulp-concat/gulp-connect/gulp-cssmin/gulp-less/gulp-load-plugins/gulp-uglify/open gulp-plumber:当编译cs…

基于nodeJs:通过不同插件能自动完成一系列动作,比如压缩js/css/img.解析模版标签.解析less等: 一.安装gulp 安装nodeJs 打开Node.js command prompt 输入npm install gulp -g全局安装gulp 在C盘根目录创建gulpTest文件夹 在命令行使用cd c:/gulpTest进入该文件夹 在该文件夹内创建文件package.json(后面会提及该文件作用),并输入{"name":"projectName"…