一开篇 在前端开发的过程中,我们经常会碰到压缩.合并.图片script 等,于是就有了gulp 前端自动化构建工具,它能帮你在前端开发中,节省时间. 1,安装 node.js 因为gulp 构建工具是基于node环境的,那么什么是 node.js呢,下面是官方的解释Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.js 的包管理器 npm,是全球最大的开源库生态系统. 用…

https://segmentfault.com/a/1190000006738327 初步了解 Metronic 的结构和应用后,我们就可以在项目中应用起来了.考虑到实际项目应用时,会有很多文件需要修改调整并压缩处理,这时候我们就会用到我们的<前端自动化神器 (Gulp)>,鉴于 gulp 的内容比较多,为了不打乱 Metronic 系列,就单独列了一篇<初探前端自动化神器 (Gulp)>.本文不对 gulp 进行详细阐述,只保留和 Metronic 相关部分. Gulp is…

之前,我介绍了学习安装并配置前端自动化工具Gulp,觉得gulp确实比grunt的配置简单很多,于是我决定再深入学习一下gulp,就去网上查了资料,发现gulp还可以自动添加版本号,这个功能就为我平时在更新css或js时老是在客户端存在缓存导致更新后的效果无法实时展现的苦恼.所以就赶紧去试了一下,果真可以,很高兴啊,真是为项目开发,为效果的快速展现提供了很多的便利. 实现原理: 1.修改js和css文件: 2.通过对js,css文件内容进行hash运算,生成一个文件的唯一hash字符串(如果文件…

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

前端自动化工具 -- gulp 使用简介 gulp是基于流的前端自动化构建工具. 之前也谈到了 grunt的用法,grunt其实就是配置+配置的形式. 而gulp呢,是基于stream流的形式,也就是前一个函数(工厂)制造出结果,提供后者使用. 同样的,也是包括基本用法和各插件的使用. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到某一工程目录下 跟grunt一般,也是需要packa…

gulp前端自动化工作流 为什么要有自动化的流程? 在我们的开发过程中有大量的重复操作 DRY Don't repeat yourself 开发人员的精力应放在哪? 创造,新的一切前端开发的编译操作 Gulp Gulp简介 链接: http://gulpjs.com/    官网 http://www.gulpjs.com.cn/   中文网 就是用来机械化的完成重复性质的工作 gulp的机制就是将重复工作抽象成一个个的任务, 4.2.Gulp准备工作 安装Node.js 安装 gulp 命令行…

gulp 前端构建工具入门 标签(空格分隔): gulp 1. 安装gulp npm i -g gulp 2. 创建gulp项目 2.1 Hello world 使用npm init初始化项目文件夹. 使用npm install --save-dev gulp本地安装gulp依赖. 根目录下新建gulpfile.js. 按照编程的尿性,先试一下hello world: var gulp = require('gulp'); gulp.task('hello', function() { cons…

一.从零开始搭建gulp前端自动化 1.首先安装nodejs 2.npm init 初始化 生成package.json 2.1 可以选装cnpm cnpm是淘宝提供的服务 安装:命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org:  注意:安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开,安装完直接使用有可能会出现错误: 2.定位到当前目录 cd..   d:   我在d盘新建了文件夹gulp…

gulp 前端构建工具使用 1.新建一个web  h5项目 2.准备好gulpfile.js文件 (1)下载链接:https://pan.baidu.com/s/116J-BaYOMRzeJW3i_JZZOw 提取码:ec9b (2)也可以创建一个这个文件,内容如下: // http://www.gulpjs.com.cn/var gulp = require('gulp');var browserSync = require('browser-sync');var reload = brows…

gulp是基于流的前端自动化构建工具. 之前也谈到了 grunt的用法,grunt其实就是配置+配置的形式. 而gulp呢,是基于stream流的形式,也就是前一个函数(工厂)制造出结果,提供后者使用. 同样的,也是包括基本用法和各插件的使用. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到某一工程目录下 跟grunt一般,也是需要package.json包依赖文件和一个入口文件 g…