由于我所在的项目组一直在用gulp构建工具,而我只是在前人搭好的环境下每次运行gulp packJs来打包js,对里面的东西全然不知,刚好最近有些时间就想自己从学学将gulp怎么用于构建前端项目中,这样也会对这个构建工具有一些深刻的理解. 首先,gulp是什么?gulp是基于nodejs的自动任务运行器,能自动地完成html js css sass image等文件的的检查.合并.压缩.浏览器自动刷新.部署文件生成,在实现上,借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后…

本人转载自: Gulp入门教程…

前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp.不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情.那就直接开始吧. 第一步:安装Node 首先,最基本也最重要的是,我们需要搭建node环境.访问http://nodejs.org,然后点击大大的绿色的install按钮,下载完成后直接运行程序,…

<Gulp 入门指南> : 使用 gulp 压缩 JS 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 访问论坛获取帮助 压缩 js 代码可降低 js 文件大小,提高页面打开速度.在不利用 gulp 时我们需要通过各种工具手动完成压缩工作. 所有的 gulp 代码编写都可以看做是将规律转化为代码的过程. 规律 找到 js/ 目录下的所有 js 文件,压缩它们,将压缩后的文件存放在 dist/js/ 目录下. gulp 代码 你可以 下载所有示例代码 或 在线查看代码 建议:你可…

Gulp简介 Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.Gulp.js是基于 Node.js构建的,利用Node.js流的威力,你可以快速构建项目. 安装Gulp 1.全局安装Gulp: npm install --global gulp 2.作为项目的开发依赖(devDependencies)安装: npm install --save-dev gulp 小贴士 使用过Gulp的人会碰到一个问题,明明全局已经安装了Gulp和Gulp的插件,但是在项…

  gulp 入门使用 使用场景 相信大家在传统的开发模式下 都是 html + css + js 然后静态文件不经过任何处理 部署到服务器,这样会有很多漏洞例如: 1.在网站上查看F12 就可以看到源代码(可以篡改提交参数) 2.代码高级语法不经过babel转换,导致低版本浏览器无法正常解析 3.代码不压缩导致文件过大 等等等等.... 复制代码 webpack 和 gulp 区别 gulp:强调的是前端开发的流程,通过配置一系列的task,定义task处理的事物(例如文件压缩合并.雪碧图.启…

Gulp入门基础教程 原文在此 前言最近流行前端构建工具,苦于之前使用Grunt,代码很难阅读,现在出了Gulp, 真是摆脱了痛苦.发现了一篇很好的Gulp英文教程,整理翻译给大家看看. 为什么使用GulpGulp基于Node.js的前端构建工具,通过Gulp的插件可以实现前端 代码的编译(sass.less).压缩.测试:图片的压缩:浏览器自动刷新,还有许多 强大的插件可以在这里查找.比起Grunt不仅配置简单而且更容易阅读和维护,我们 可以做一个对比: Grunt: sass: { dist…

这里是gulp入门的一些操作,实现了编译sass文件.压缩.合并.添加版本号等基本功能. 友情提示,如果npm出现无法下载可以安装 cnpm.在安装完Nodejs 后 npm install cnpm -g --registry=https://registry.npm.taobao.org 完成后可 cnpm -v 查看安装结果 1.安装Nodejs 选择合适的版本下载Nodejs 2.安装全局gulp npm install --global gulp-cli 3.进入项目目录(之后的操作全…

一直想学习下gulp看了蛮多资料,然后总是感觉是是而非,突然开窍了,把自己学会的过程给大家分享下,入门超级简单的 gulp安装 安装gulp 如果参数-g 表示全局安装 $ npm install gulp $ npm install gulp --save-dev 我们先来学习压缩JS文件,新建文件目录如下 dist为解压后文件放置的目录(可自定义) src为要解压的文件放置目录(可自定义) gulpfile.js: gulp的配置文件,在根目录中 压缩思路1.找到要压缩的JS目录  src/…

gulp新手入门 全局安装 cnpm install -g gulp 本地安装cnpm install gulp -D 如果项目没有package.json,记得npm init 安装插件cnpm install gulp-插件名 -D 插件官方文档 细心的科普 //i  -->install //D  -->--save-dev 记录package.json文件里 //S  -->--save 本地安装 gulp报低级错误 删除node_modules在安装 rm -rf node_m…