/** * Created by hasee on 2016/7/5. */var gulp = require('gulp');var sass = require('gulp-sass');//容易出错 plusvar webserver = require("gulp-webserver"); /*js*//*var uglify = require("gulp-uglify");*/var rename = require("gulp-rename…

gulp自动化构建工具: 把前端开发常见的处理(“搬砖”)程序,通过一个工具模块管理起来,只需配置一次,达到自动处理目的,简化开发,提高效率!! 安装: 1.全局安装(全局安装一个gulp命令) A.下载安装: cnpm:cnpm i gulp -g 如果cnpm安装有问题:可使用yarn安装 yarn:   yarn global add gulp B.测试 gulp -v  2.本地安装(引入依赖模块,支持不同版本的项目运行) A.安装 a.创建一个新文件夹,初始化package.json…

背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档一样.一个html页面,夹杂着css,javascript是再常见不过的事了. 随着前端的不断发展,特别是单页应用的兴起,这种所见即所得的IDE工具,就渐渐地退出了前端的主流.一个应用,通常只有一个静态页面(index.html),甚至这个页面的body只有一个或少数几个div组成.这时有大量的cs…

gulp    自动化构建工具,实时监控.代码合并.压缩... http://www.gulpjs.com.cn/     中文网 http://gulpjs.com/plugins/     英文网 ,插件   本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp.不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情.那就直接开始吧. 第一步:安装Node 首先,最基本也最重要的是,我们需要搭建node环境.访问 http:/…

前言 Gulp,简而言之,就是前端自动化开发工具,利用它,我们可以提高开发效率. 比如: 1.  压缩js 2.  压缩css 3.  压缩less 4.  压缩图片 等等… 我们完全可以利用Gulp来自动化地完成这些重复性很强的工作. Gulp可以帮助我们 用自动化构建工具增强你的工作流程! 好了,废话不多说了.既然要了解Gulp,就得先安装它.Gulp是基于node来实现的,so你得先有个node环境 优势: node环境有了后,安装Gulp就很easy咯 入门指南 1. 全局安装 gulp…

前端自动化打包发布已是一种常态,尤其在移动端,测试过程中静态资源的缓存是件很头疼的事情,有时候明明处理的bug测试还是存在,其实就是缓存惹的祸,手机不比pc浏览器,清理缓存还是有点麻烦的.所以自动化实现静态资源的版本更新才是正道. 实际开发过程中,我们常用到的功能包括: 1.目标路径的清除: 2.静态资源复制到目标路径: 3.css文件的合并与压缩: 4.js文件的合并与压缩: 5.根据文件的变化添加版本号: 第1.2.3.4几个功能倒是很好解决,今天主要说说gulp实现静态资源自动添加版本号:…

我用的是windows,所以以下操作针对于windows用户,其他系统有不一样的地方请自行查阅资料更正. 好了,废话少说,反正也就是随手捣腾.下雨了,天晴了,我们开始搞gulp了 安装:gulp是个构建前端自动化的工具,现在的前端太牛逼,不搞点自动化都不好意思说自己弄过前端. gulp是基于NodoJs的,怎么说也是个服务,没有服务端的支持是跑不起来的,所以,接下来我们要先安装npm. npm是Nodejs的包管理工具,至于什么叫Nodejs的包管理工具,自行谷哥度娘 首先去https://no…

简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率. gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试.检查.合并.压缩.格式化.浏览器自动刷新.部署文件生成,并监听文件在改动后重复指定的这些步骤.在实现上…

相关网站 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 让简单的任…

gulpfile.js: var gulp = require("gulp"); var imagemin = require("gulp-imagemin");//压缩图片插件 var uglify = require("gulp-uglify"); //js压缩插件 var sass = require("gulp-sass"); //sass转换为css插件 var concat = require("gulp…

1.全局安装gulp npm install gulp -g 2.项目内安装gulp npm install gulp -s 3.项目根目录新建gulpfile.js js内代码: //载入gulp核心包 const gulp = require('gulp'); //引入http服务器 const connect = require('gulp-connect'); //引入less文件 const less = require('gulp-less'); // (任务名,任务执行函数) gu…

IOS自动化打包介绍  标签: app打包 , Ios打包 , iphone打包 , iphone自动化打渠道包    分类:无线客户端技术, 贴吧技术 摘要 随着苹果手持设备用户的不断增加,ios应用也增长迅速,同时随着iphone被越狱越来越多的app 的渠道也不断增多,为各个渠道打包成了一件费时费力的工作,本文提供一种比较智能的打包方式来减少其带来的各种不便. TAG Ios打包,app打包,iphone打包,iphone自动化打包,ios打渠道包,iphone自动化打渠道包 自动化打包背…

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

前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为庞大和复杂,代码维护.打包.发布等流程也变得极为繁琐,同时浪费的时间和精力也越来越多,当然人为的错误也随着流程的增加而增加了更多的出错率.致使每一个团队都希望有一种工具,能帮助整个团队在开发中能精简流程.提高效率.减少错误率.随之讨论自动化部署也越来越多,并且国内很多大型团队也都有自己成熟的自动化部…

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

前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为庞大和复杂,代码维护.打包.发布等流程也变得极为繁琐,同时浪费的时间和精力也越来越多,当然人为的错误也随着流程的增加而增加了更多的出错率.致使每一个团队都希望有一种工具,能帮助整个团队在开发中能精简流程.提高效率.减少错误率.随之讨论自动化部署也越来越多,并且国内很多大型团队也都有自己成熟的自动化部…

想要使用gulp,就要了解gulp,就像追自己的爱豆,你要知道爱豆的喜好.兴趣 简单的了解你的新爱豆———安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 1. gulp的用途: 代码压缩 CSS自动加前缀 LESS编译 地址版本追加 文件合并 文件修改自动刷新页面 更新编译本地依赖静态资源自动加缓存戳避免客户端浏览器缓存 看到这些作用,似乎gulp与grunt没什么区别 然鹅,对于这两款作用相同的前…

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

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

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

一个月没写博客了,今天有时间,就写个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属于静态文件,很多时候浏览器存在缓存机制,为了避免缓存带…

蛮荒时代的程序员: 做项目的时候,会有大量的js 大量的css   需要合并压缩,大量时间需要用到合并压缩 在前端开发中会出现很多重复性无意义的劳动  自动化时代的程序员: 希望一切都可以自动完成  安装 常用插件.压缩插件.合并插件等.  用插件实现 功能无限扩展   简单介绍三种工具 grunt 是js任务管理工具(自动化构建工具)    -- Grunt官网 戳这里 优势:出来早 社区成熟  插件全   缺点:配置复杂   效率低 (cpu占用率高)  ------------------…

30分钟手把手教你学webpack实战 阅读目录 一:什么是webpack? 他有什么优点? 二:如何安装和配置 三:理解webpack加载器 四:理解less-loader加载器的使用 五:理解babel-loader加载器的含义 六:了解下webpack的几个命令 七:webpack对多个模块依赖进行打包 八:如何独立打包成样式文件 九:如何打包成多个资源文件 十:关于对图片的打包 十一:React开发神器:react-hot-loader 回到顶部 什么是webpack? 他有什么优点?…

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

首先安装全局gulp $ npm install --global gulp 下载成功后 新建一个项目或者一个文件夹(做测试) mkdir testgulp 在该文件或者项目下下载gulp工具 $ npm install --save-dev gulp  //  yarn add gulp --save-dev 出现这样的代码就表示文件tetsgulp里面下载成功 再在项目的根目录下新建一个js文件gulpfile.js 在js 文件 引入 gulp var gulp = require('gu…

1.http://www.cnblogs.com/lovesong/p/6413546.html (gulp与webpack的区别) 2.http://blog.csdn.net/qq_32312635/article/details/71706145 (Gulp和Webpack对比) 3.http://blog.csdn.net/OLiver_web/article/details/53966774 (前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpa…

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

引言 在这篇文章中我基于上一篇文章gulp的简单打包示例(一)的代码(重点,不然看的懵逼状态)来介绍gulp的自动化打包,主要是修改gulpfile.js配置文件.当我们执行gulp任务,gulp自动帮我们打开默认的网页文件,每当保存代码,gulp也自动监测相应文件的变化,执行相应的任务,并实时刷新页面. 下载 注意open并不是gulp的插件,它只是一个第三方库,可以自动在浏览器打开我们设置的url地址. npm install gulp-connect open --save-dev 引入插…

注意部FPM时的环境一定要跟生产环境的系统版本最好是保持一至,我第一次测试没通过,(我在CENTOS7和部属FPM打好的包在Centos6.x和安装,结果失败) 1:安装 FPM打包工具的依赖包: [root@DB apps]# yum install gcc* rpm-build 2:源码安装ruby https://cache.ruby-lang.org/pub/ruby/2.3/ruby-2.3.4.tar.bz2在安装Ruby之前先安装openssl源码 修改Makefile:增加 CF…