前言 新的一年啦,感觉总是静不下心,用了一天的时间吧,算是对gulp 这个前端打包工具入门了,自己也写了demo,表示对这个稍微理解了吧, 当然还是有差距的啦,下面讲讲怎么用吧: 如何用 当然先去官网去看下如何使用的,这个是入门指南 https://www.gulpjs.com.cn/docs/getting-started/ 1. 全局安装 $ npm install --global gulp 2你的項目裏 執行 npm init 全部回車 ,需要的地方在改下就好啦,這個沒有那么多要求,随意…
使用gulp自动化构建项目是前端学习的重要部分,gulp依赖于node.js.首选电脑要配置node和npm. 查看node版本号 node --version 查看npm 版本 npm --version 一.安装gulp 1.全局安装gulp npm install gulp –g 我的项目结构如下图 2.在根文件夹下使用 npm init 一直回车直到OK?输入yes回车 会出现一个文件package.json(这里示例根文件夹为gulp-app) 3.配置项目的gulp环境,在根目录打开…
gulp自动化构建工具: 把前端开发常见的处理(“搬砖”)程序,通过一个工具模块管理起来,只需配置一次,达到自动处理目的,简化开发,提高效率!! 安装: 1.全局安装(全局安装一个gulp命令) A.下载安装: cnpm:cnpm i gulp -g 如果cnpm安装有问题:可使用yarn安装 yarn:   yarn global add gulp B.测试 gulp -v  2.本地安装(引入依赖模块,支持不同版本的项目运行) A.安装 a.创建一个新文件夹,初始化package.json…
gulp及gulpfile.js编写示例    本文主要记录一个gulpfile.js示例,以免以后用的时候遗忘.但首先还是要了解gulp是什么以及如何使用. 一.什么是gulp 简单来说:就是压缩前端代码,实现浏览器自动刷新的工具. 完整地说:gulp是一个前端的自动化构建工具,是基于Node.js的自动化任务运行期,能自动化完成javascript/sass/less/html/image/css等文件的测试.检查.合并.压缩.格式化.浏览器自动刷新.部署文件生成.并监听文件在改动后重复指定…
为了节省http请求次数.节约带宽,加速页面渲染速度,达到更好用户体验的目的.现在普遍的做法是在上线之前做静态资源的打包构建,也就是静态资源的合并压缩: 这里使用的是gulp,当然现在有更强大的模块化构建工具webpack,大家可以尝试一下,但是不管用什么工具,只要能解决对应的问题,就是好工具: 大家注意,使用gulp需要先安装node哦,具体安装教程请百度一下 完整的配置和demo在github上:https://github.com/hj1226104386/gulp-workflow.gi…
gulp    自动化构建工具,实时监控.代码合并.压缩... http://www.gulpjs.com.cn/     中文网 http://gulpjs.com/plugins/     英文网 ,插件   本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp.不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情.那就直接开始吧. 第一步:安装Node 首先,最基本也最重要的是,我们需要搭建node环境.访问 http:/…
Study Notes 本博主会持续更新各种前端的技术,如果各位道友喜欢,可以关注.收藏.点赞下本博主的文章. Gulp 用自动化构建工具增强你的工作流程! gulp 将开发流程中让人痛苦或耗时的任务自动化,从而减少你所浪费的时间.创造更大价值. 基本使用 安装 gulp npm i gulp -D 在项目根目录下创建gulpfile.js文件 function defaultTask(cb) { // 在此处写默认任务的代码 cb(); } function fooTask(cb) { //…
最近正在使用gulp去帮我自动化构建一些技术块,感觉很爽,所以把gulp操作步骤给写笔记,记录下来... 首先了解什么是gulp? 我的理解是一个工具并且自动化的,能帮你把一些前端技术的语法转换成当前浏览器能读取的技术.比如less.css,sass.css或者es6等等,只要配置好就可以运行了. gulp安装 为了方便使用,直接全局安装 npm install gulp -g 然后到指定项目工程中进行安装配置 npm install gulp --save-dev  这样就是将gulp配置设置…
好久没有写博客了,想到2年前答应要放出源代码的也没放出来,最近终于有空先把纯js实现无限空间大小的本地存储的功能开源了,项目地址https://github.com/xueduany/localstore,demo见http://xueduany.github.io/localstore/,下面给大家简单说说大概原理,具体细节和异常处理后面有机会在单独说 先说下突破本地localStorage的原理,官方原话是这么说的http://www.w3.org/TR/2013/PR-webstorage…
前言 Gulp,简而言之,就是前端自动化开发工具,利用它,我们可以提高开发效率. 比如: 1.  压缩js 2.  压缩css 3.  压缩less 4.  压缩图片 等等… 我们完全可以利用Gulp来自动化地完成这些重复性很强的工作. Gulp可以帮助我们 用自动化构建工具增强你的工作流程! 好了,废话不多说了.既然要了解Gulp,就得先安装它.Gulp是基于node来实现的,so你得先有个node环境 优势: node环境有了后,安装Gulp就很easy咯 入门指南 1. 全局安装 gulp…