gulp构建工具学习汇总

前端脚手架____gulp配置文件------- https://pan.baidu.com/s/1eSs7COy 1:有了package.json 直接 npm install自动下载相应的npm包 2:多个项目同时监听---开两个bash---改变gulp-live-server模块端口号----------端口号不好改的话可开一个bash更改目录重新监听吧--------时间放在刀刃上解决现阶段的目标如果在同一个bash下构建多个项目每次都要调整gulp任重中的目录地址 gulp构建…

Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用

Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用 Grunt和Gulp是Javascript世界里的用来做自动压缩.Typescript编译.代码质量lint工具.css预处理器的构建工具,它帮助开发者处理客户端开发中的一些烦操重复性的工作.Grunt和Gulp都在Visual studio 2015中得到支持.ASP.NET 项目模板默认使用Gulp. Grunt和Gulp Grunt和Gulp有什么区别?Gulp虽然是稍微晚一点登场的,但是它因crisp pe…

[翻译]在gulp构建工具中使用PostCSS

前言 PostCSS已经在一段时间内迅速普及,如果你还不知道PostCSS或还没有使用它,我建议你看一下之前的一篇介绍文章<PostCSS简介>,其中介绍了使用PostCSS的基本方法,包括如何安装运行一些插件. 本文,将介绍如何在gulp构建工具中使用PostCSS.因为这不是一篇gulp的教程,所以在这里不介绍如何使用gulp.对于gulp可以参看这篇文章<gulp.js简介> 创建项目在开始之前,首先创建一个项目文件夹.该文件夹里创建dist和dest文件夹.dist里放所…

webpack前端构建工具学习总结（一）之webpack安装、创建项目

npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用. 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用. nodejs的官网地址:https://nodejs.org/en/ nodejs中文网地址:http://nodejs.cn/ 1.从node.js官网下载最新安装包进行安装 2.wind…

webpack前端构建工具学习总结（二）之loader的使用

Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换. Loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为参数,返回转换的结果.这样,我们就可以通过 require 来加载任何类型的模块或文件,比如 CoffeeScript. JSX. LESS 或图片. Loader 可以在 require() 引用模块的时候添加,也可以在 webpack 全局配置中进行绑定,还可以通过命令行的方式使用. 下面的例子…

webpack前端构建工具学习总结（四）之自动化生成项目中的html页面

接续上文:webpack前端构建工具学习总结(三)之webpack.config.js配置文件插件的介绍文档:https://www.npmjs.com/package/html-webpack-plugin 1.安装html-webpack-plugin插件,输入命令:npm install html-webpack-plugin --save-dev 2.在webpack.config.js文件中,引入html-webpack-plugin插件 3.输入命令:npm run webpack…

FIS构建工具学习（一）

一.FIS是什么在做项目的时候,用到部门内部前端人员开发的fiskit构建工具,经过这次项目基本把它的配置弄清楚了,fiskit构建工具是基于FIS的,所以自己也准备学习FIS,以便更好的理解. 后来在网上查阅了相关文件,才发现FIS是百度开发的,网上人说FIS适用于团队开发.FIS是类似于Grunt,Gulp,Webpack的一种前端构建工具,FIS3是面向前端的工程构建工具, 用于解决前端性能优化.资源加载(异步.同步.按需.预加载.依赖管理.合并.内嵌).模块化开发.自动化工具.开发规范…

ASP.NET5之客户端开发：Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用

Grunt和Gulp是Javascript世界里的用来做自动压缩.Typescript编译.代码质量lint工具.css预处理器的构建工具,它帮助开发者处理客户端开发中的一些烦操重复性的工作.Grunt和Gulp都在Visual studio 2015中得到支持.ASP.NET 项目模板默认使用Gulp. Grunt和Gulp Grunt和Gulp有什么区别?Gulp虽然是稍微晚一点登场的,但是它因crisp performance和优雅的语法受到欢迎.与Grunt不同,Grunt往往在硬盘上是…

NPM、nodeJS安装，grunt自动化构建工具学习总结

一:安装 npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用. 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用. nodejs的官网地址:https://nodejs.org/en/ nodejs中文网地址:http://nodejs.cn/ 1.从node.js官网下载最新安装包进行安装 2…

gulp 构建工具

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

gulp构建工具的安装

第一步:node.js安装在gulp安装之前,本机需要node环境.访问http://nodejs.org,然后点击大大的绿色的install按钮,下载完成后直接运行程序.npm会随着安装包一起安装,稍后会用到它. 为了确保node.js和npm已安装,请在命令行中输入以下命令: node -v npm -v 这两个命令,用于显示node或npm的版本.确定这两个安装后,可进行下一步第二步: gulp 安装安装全局的gulp npm install -g gulp 如果ios安装不上,请在…

使用gulp构建工具

之前一个demo中用的是grunt,照着grunt用到的插件找了下gulp的,总体使用还算顺畅,说实话并不觉得学习成本有降低什么的,差不多.不过也遇到一些问题: 1.gulp.dest()输出目录需要用"./"而不能"/" 2.gulp的jshint有些规则检测不到,而grunt却检测到了,可以用"asi": true测试下.(据说现在大家都用eslint代替jslint,看了下有eslint180条左右的规则,吓cry了好么.) 3.gulp任…

webpack前端构建工具学习总结（三）之webpack.config.js配置文件

Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行.默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一个 json 格式的配置信息对象,或者通过 --config 选项来指定配置文件. webpack文档:https://webpack.github.io/docs/ 1.新建一个文件夹src存放打包前的源文件,dist文件夹存放打包后的文件,新建一个webpack.config.js为webpac…

Gradle项目构建工具学习笔记（持续更新中。。。）

1.gradle的安装 1)从官网下载gradle,然后解压 2)在系统环境变量新建GRADLE_HOME 3)将%GRADLE_HOME%\bin加入PATH中 2.验证是否安装成功 gradle -version…

学习笔记——Maven实战（六）Gradle，构建工具的未来？

Maven面临的挑战软件行业新旧交替的速度之快往往令人咂舌,不用多少时间,你就会发现曾经大红大紫的技术已经成为了昨日黄花,当然,Maven也不会例外.虽然目前它基本上是Java构建的事实标准,但我们也能看到新兴的工具在涌现,比如基于Goovy的Gradle,而去年Hibernate宣布从Maven迁移至Gradle这一事件更是吸引了不少眼球.在此之前,我也听到了不少对Maven的抱怨,包括XML的繁冗,不够灵活,学习曲线陡峭等等.那Gradle是否能够在继承 Maven优点的基础上,克服这些缺…

express+gulp构建项目（二）启动项目和主文件

这一次整理的内容是项目主文件和如何启动项目. 启动项目通过nodejs官网的例子https://nodejs.org/docs/latest-v4.x/doc/api/synopsis.html我们可以知道,在项目目录下打开终端命令行,并且输入如下命令即可启动服务: node app.js 其中app.js是项目的主文件. 那是因为这个主文件里面有创建服务和监听端口的语句: const http = require('http'); const hostname = '127.0.0.1';…

Maven实战——Gradle，构建工具的未来？

许晓斌-- 四月 05, 2011 Maven面临的挑战软件行业新旧交替的速度之快往往令人咂舌,不用多少时间,你就会发现曾经大红大紫的技术已经成为了昨日黄花,当然,Maven也不会例外.虽然目前它基本上是Java构建的事实标准,但我们也能看到新兴的工具在涌现,比如基于Goovy的Gradle,而去年Hibernate宣布从Maven迁移至Gradle这一事件更是吸引了不少眼球.在此之前,我也听到了不少对Maven的抱怨,包括XML的繁冗,不够灵活,学习曲线陡峭等等.那Gradle是否能够在继承…

[Gradle] Gradle 构建工具的未来

转载地址:http://www.infoq.com/cn/news/2011/04/xxb-maven-6-gradle Maven面临的挑战软件行业新旧交替的速度之快往往令人咂舌,不用多少时间,你就会发现曾经大红大紫的技术已经成为了昨日黄花,当然,Maven也不会例外.虽然目前它基本上是Java构建的事实标准,但我们也能看到新兴的工具在涌现,比如基于Goovy的Gradle,而去年Hibernate宣布从Maven迁移至Gradle这一事件更是吸引了不少眼球.在此之前,我也听到了不少对Ma…

构建工具--glup如何压缩,丑化代码

目录为什么使用实现为什么使用最近在迭代公司的项目,发现项目有如下缺点: 代码没有压缩,js文件,内存大,放在服务器上占空间: 源代码没有混淆或者丑化处理,本公司的程序员写出来的代码和高质量逻辑容易被其他公司的程序员盗用: js,css 文件数量多,浏览器加载起来会"手忙脚乱"和"生气". 这个小项目使用gulp构建工具写的,所以很自然用gulp下的一系列插件来完成.其中用到的插件有:gulp-concat整合数量大的文件为一个文件,gulp-uglify丑化…

前端自动化构建工具 gulp 学习笔记一、

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

前端构建工具Gulp的学习和使用

前几天刚鼓捣了Grunt的使用,结果文档还没捂热,老大说我们还是用gulp吧,搞得我又得来整gulp,眼泪流成河了,真是不晓得底层人民的辛苦啊.不过经过对gulp的学习,发现很好用,比grunt舒服! gulp是一个前端自动化构建工具,与grunt类似,但相对grunt而言gulp更好用.好处是无需写一大堆繁杂的配置参数,API也相对简单很多,学习起来很比grunt容易很多,而且gulp使用Nodejs中流(stream)来读取和操作数据,其速度更快,减少频繁的 IO 操作. 下面是学习过程中的…

前端自动化构建工具——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快速入门

因为之前一直有人给我推荐gulp,说他这里好哪里好的.实际上对我来说够用就行.grunt熟悉以后实际上他的配置也不难,说到效率的话确实是个问题,尤其项目大了以后,目前位置遇到的项目都还可以忍受.不过不管怎么说,需要亲自用过gulp之后才能品评他和grunt之间的优劣.不废话,直接上实例. 本人自建了一个前端目录结构,后续的例子都是以这个目录结构为准.dest是我们打包压缩结果保存目录,现在是空的.以后每完成一个实例,我们就会清空一下dest目录,保证下一个实例的结果和实例代码对应. 1. 第一个…

前端构建工具之gulp（一）「图片压缩」

前端构建工具之gulp(一)「图片压缩」已经很久没有写过博客了,现下终于事情少了,开始写博吧今天网站要做一些优化:图片压缩,资源合并等以前一直使用百度的FIS工具,但是FIS还没有提供图片压缩的相关插件,于是找到了腾讯的智图,而智图目前提供的插件只有gulp-imageisux 无奈之下,只好去学习gulp这款工具了,下面是gulp的相关介绍: gulp介绍 gulp.js 是一种基于流的,代码优于配置的新一代构建工具. Gulp 和 Grunt 类似.但相比于 Grunt 的频繁的 IO…

前端自动化构建工具gulp的使用总结

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

前端构建工具gulp使用

前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://github.com/lisposter/gulp-docs-zh-cn Gulp插件网 http://gulpjs.com/plugins/ Awesome Gulp https://github.com/alferov/awesome-gulp StuQ-Gulp实战和原理解析 http://i5…

【gulp构建工具学习汇总】的更多相关文章