一,基础篇 先安装nodejs 使用淘宝镜像安装tnpm 安装 cnpm 插件:npm install -g cnpm --registry=https://registry.npm.taobao.org 然后就可以用 cnpm命令从淘宝镜像获取插件包了:当然,你这时候依旧可以用npm命令从官方服务获取插件包. cnpm支持除 publish 之外的原生 npm 所有命令. 1,新建文件夹 gulp 2,切换到gulp目录下,执行 cnpm init,填写相关信息,生成package.json文…

前言 ​ 最近几年前端技术发展日新月异,特别是单页应用的普及.组件化.工程化.自动化成了前端发展的趋势.webpack已经成为了前端打包构建的主流,但是一些老古董的项目还是存在的,也有优化的必要,正好公司的老项目需要优化,不多说拿gulp实践一下. 本文需要安装node(自行安装),并了解过gulp入门.gulp脚本下载:https://github.com/youhunwl/gulp 欢迎star. 实践 创建项目目录 首先初始化npm依赖项与基本信息,使用命令npm init一直回车,生成p…

就前端的发展而言会越来越朝着后端的标准化靠近,后端的工程化以及模块化都很成熟.基于这样一个思路,开始探索如何优化目前的开发流程.而使用的工具就是gulp. 个人觉得gulp比较webpack更为简单实用,gulp依靠插件工作,webpack除了插件还有各种loader.当然这不是重点,重点是能够确实解决问题.目前公司对前端开发并没有一个明确的要求,所以个人根据现有的开发流程以及开发认识,写了如下的代码. 目录结构,src内部的相关文件和代码,最终编译到dist中,dist就是发布的代码 然后是p…

关于gulp的使用,已经在之前写过一篇文章,但是遗留了一个问题.问题是实现文件的增量式更新,就是给html引入的js和css文件打上标记.每次更新标记更新. 上篇文章想通过开发同时实现标记的实时更新,后来借鉴了别人的实现,原来的确是应该将这个过程分为开发和生产两个环境的,于是茅塞顿开.于是有了本文. 代码 package.js文件 { "name": "gulpf", "version": "1.0.0", "des…

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

本文结合最近的工作经验,总结出一个较简洁的前端自动化构建方案,主张css和js的模块化,并通过grunt的自动化构建,有效地解决css合并,js合并和图片优化等问题,对于提高前端性能和项目代码质量有一定参考价值,欢迎阅读和点评:) github地址:https://github.com/liuyunzhuge/generator-web demo地址:https://liuyunzhuge.github.io/generator-web/ 有兴趣的同学,在阅读文章,学习或使用demo的过程中,有…

通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 javascript 文件.多终端多浏览器同步测试的开发环境,并且还可以通过 piblish 命令对项目下的文件进行打包操作. 相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常…

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

前言 前端自动化构建工具从最开始的grunt, gulp, fis等到现在比较流行的webpack可谓层出不穷,个人还是比较倾向于gulp,虽然有的时候会因为某个插件的配置问题头疼很久,但不可否认gulp真的很灵活,而且个人觉得它和node结合起来比较舒服,再有对项目目录结构的要求比较低,即使再老再乱的项目也可以通过它进行整理和自动化构建.这里用本公司的一个老项目举例子. 项目目录 因为是老项目,各种资源的引用乱七八糟,首先花费大量时间把项目中所有静态资源全部整理至新的目录中,并且把原来项目中的…

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

前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本的了解.如果你对 Gulp 还不是很了解,可以通过下面两篇文章快速了解 Gulp . 由于几乎所有的插件都有非常友好的使用文档,所以本文不讨论涉及插件使用的东西,仅是一个汇总.排名不分先后. 相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gul…

相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三) 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四) 一.准备工作 1.什么是 npm? npm 是 nodejs 的包管理工具,主要功能就是管理.更新.搜索.发布node的包.Gulp 就是通过 NPM 安装的.关于 NP…

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

什么是自动化的前端构建流? 1. 自动补全css私有前缀,自动转化less\sass为css,自动转化es6\vue\jsx语法为js,自动打包小图片为base64以减少http请求,自动给js,css,甚至img加hash值,以避免浏览器缓存,自动合并压缩代码,自动刷新实时预览效果(甚至免刷新),可以按照自己喜欢的目录结构存放原始资源文件,为了方便手机等访问,不需要搭建apache.nginx等服务器实现http访问...... 如何快速开始 首先 git clone https://gith…

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

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

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

参考资料: 用自动化构建工具增强你的工作流程!:http://www.gulpjs.com.cn/ gulp详细入门教程:http://www.ydcss.com/ JavaScript构建(编绎)系统大比拼:Grunt vs. Gulp vs. NPM:http://news.cnblogs.com/n/502111/ 基于gulp和webpack的前端工程化:https://boke.io/ji-yu-gulphe-webpackde-qian-duan-gong-zuo-liu/…

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

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

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

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

(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-…

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

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

什么是gulp?   基于node的自动化构建工具   扩展:开发的时候分为2个节点一个是开发阶段  另一个是部署阶段        开发阶段:源文件不会被压缩            部署阶段:所有文件需要压缩 .gulp能干什么? 1  自动压缩JS文件 2  自动压缩CSS文件 3  自动合并文件 4  自动编译sass 5  自动压缩图片 6  自动刷新浏览器 ........... .怎么安装gulp?   因为它基于nodeJS,因此需要先安装node环境   安装完成后,打开你的命令…

前端自动化可分为: yo(脚手架工具).grunt(构建工具).bower(包管理器). OMAN的特性 http://yeoman.io/learning/   闪电般的初始化:项目开始阶段,可以基于现有的模板框架(例如:HTML5 Bolierplate.Twitter Bootstrap)进行项目初始化的快速构建. 了不起的构建流程:不仅仅包括JS.CSS代码的压缩.合并,还可以对图片和HTML文件进行优化,同时对CoffeScript和Compass的文件进行编译. 自动编译CoffeS…