继续gulp的爬坑路,在准备get更多gulp的具体操作之前,先来明确一下在gulp中创建和使用多个task任务的情况. gulp所要做的操作都写在gulp.task()中,系统有一个默认的default任务,如下: var gulp = require('gulp');//gulp自身 gulp.task('default',['task1','task2'], function() { // 将你的默认的任务代码放在这 console.log("default"); }); 在命令

1.我npm安装了Browserify,tsify和vinyl-source-stream包,想要引用安装的插件,所以就走了引用插件的流程,修改了gulpfiles.js文件,引用流程完毕后,在终端gulp打包,结果给我报了这个错task function must be specified.翻译过来就是:必须指定任务函数 2.我尝试看看gulp命令能不能用,这里我简单的输入gulp -v(查看gulp的版本) 3.也就是说gulp工具正常,是我代码有问题.通过排除法,发现是gulpfiles.

问题出在gulp版本上,以下是gulp3  VS  gulp4的区别: gulp4最大的变化是不能像以前那样传递一个依赖的任务列表. gulp3中,如果有一个任务A.B和C的列表,你想在一个序列中运行(确保A在B开始之前完成,而B在C开始之前完成),代码如下: gulp.task('a',() => { // Do something }); gulp.task('b',['a'],() => { // Do something }); gulp.task('c',['b'],() =>

系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp专家 前端构建大法 Gulp 系列 (四):gulp实战 gulp 本身能做的事情非常少,主要是通过插件来提供各种功能,gulp本身只提供了4个非常简洁的API, 掌握这4个API你就基本掌握了gulp的全部. 一.gulp.task gulp 是基于task的方式来运行 定义 gulp.task

目前最流行的两种使用JavaScript开发的构建工具是Grunt和Gulp.为什么使用gulp?因为Gulp更简单.Grunt任务拥有大量的配置,会引用大量你实际上并不需要的对象属性,但是Gulp里同样的任务也许只有几行.有兴趣的同学在学完本文后对比使用Grunt,你就会发现Gulp的代码量是最少的. 安装 需要先安装node.js.这里安装的v5.11.0. 使用node -v查看版本号. gulp的安装不是很顺利.按照官方给的安装方法: npm install --global gulp

Gulp 自动化工具开发非常方便,便于上手,值得使用. 一.Gulp安装 gulp是基于NodeJS运行的,所以需要想安装NodeJS.  http://nodejs.org/download/ 安装gulp # 安装全局环境 npm install gulp -g #安装本地环境 npm install gulp --save-dev 二.Gulp插件安装 npm install browser-sync gulp-compass gulp-sass gulp-rename gulp-jshi

在很多场合都会听到前端工和 node 程师推荐 Grunt 来实现项目的自动化,自动化可以自动完成 javascript/coffee/sass/less 等文件的的测试.检查.合并.压缩.格式化.部署文件生成,并监听文件在改动后重复指定的这些步骤. 得益于 Grunt 基于任务的设计模式,这些步骤可以很好的归类执行,让开发效率得到了一次提升,但杀敌 1000,得自损 800 啊,学习曲线有点高,Gruntfile配置任务很难理解,经常容易忘记. Grunt.js 太复杂了,复杂到比使用和配置

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

gulp是基于Nodejs的自动化任务工具,类似java中的ant,结合相关插件可方便的完成javascript/coffee/sass/less/html/image/css等文件的的测试.检查.合并.压缩.格式化.浏览器自动刷新.部署文件生成,并监听文件在改动后重复指定的这些步骤.很好的利用了Nodejs的Stream和pipe,前一级输出直接为后一级的输入,操作非常方便.在前端主要有以下用途: gulp API:task.src.dest.watch gulp.task(name[, de

很久没有更新博文了. 经过了一次年前吐血的赶项目,终于在年后回血了.趁着有空,新学到了一个前端自动化构建工具-gulp. 现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gulp? 3.怎么用?   什么是gulp 答:是一个前端自动化的构建工具,直白点说,如果没有这个工具,我们利用人工依旧可以做到以下优点,但是在项目逐渐庞大的时候,采用这个工具,可以提升性能和效率.   为什么要用gulp? 答: 1.js和css属于静态文件,很多时候浏览器存在缓存机制,为了避免缓存带

好久都没有更新博客了,每天繁忙的工作,下班之后都不想开设备了.前段时间有幸学习了一下gulp这款构建工具,现在和大家分享一下. 为什么使用Gulp Gulp基于Node.js的前端构建工具,通过Gulp的插件可以实现前端代码的编译(sass.less).压缩.测试:图片的压缩:浏览器自动刷新,还有许多强大的插件可以在这里查找.比起Grunt不仅配置简单而且更容易阅读和维护,我们可以做一个对比: Grunt: sass: { dist: { options: { style: 'expanded'

建立一个gulpfile.js文件,内容直接抄gulp-htmlmin的readme: var gulp = require('gulp'); var htmlmin = require('gulp-htmlmin');   gulp.task('minify', function() {   gulp.src('src/*.html')     .pipe(htmlmin({collapseWhitespace: true}))     .pipe(gulp.dest('dist')) });

转载:http://segmentfault.com/blog/laopopo/1190000000372547 http://javascript.ruanyifeng.com/tool/gulp.html 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp.不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情.那就直接开始吧. 第一步:安装Node 首先,最基本也最重要的是,我们需要搭建node环境.访问http://no

之前写过一篇gulp的使用文章一篇迟到的gulp文章,代码合并压缩,less编译 最近有在用gulp,使用到一个gulp-nunjucks-render插件,感觉挺方便的 gulp-nunjucks-render 用来渲染Nunjucks templates 安装 npm install --save-dev gulp-nunjucks-render 使用 var env = process.env.NODE_ENV; var ver = require('./package.json').ve

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

gulp  gulp强调的是前端开发的工作流程,我们可以通过配置一系列的task,定义task处理的事务(例如文件压缩合并.雪碧图.启动server.版本控制等),然后定义执行顺序,来让gulp执行这些task,从而构建项目的整个前端开发流程.简单说就一个 Task Runner . webpack webpack是一个前端模块化方案,更侧重模块打包,我们可以把开发中的所有资源(图片.js文件.css文件等)都看成模块,通过loader(加载器)和plugins(插件)对资源进行处理,打包成符合

说起来惭愧,一直用公司内部的工具,没有用这些红得发紫的东西.今天东抄西拼终于搞出第一个gulp应用.gulp是做什么的,好处在哪儿我不废话了.直入主题吧. 先在D盘下建立一个xxxx目录,然后打开控制台,直接将npm install gulp. 里面多出一个node_modules目录安装成功. 然后xxxx目录下面建一个src目录,里面建一个index.html文件,内容如下或你自己乱写一点东西,我们这个例子主要测试压缩html. <!DOCTYPE html> <html> &

在软件开发中使用自动化构建工具的好处是显而易见的.通过工具自动化运行大量单调乏味.重复性的任务,比如图像压缩.文件合并.代码压缩.单元测试等等,可以为开发者节约大量的时间,使我们能够专注于真正重要的.有意义的工作,比如设计业务逻辑,编写代码等等. 对很多前端开发人员而言,Grunt 无疑是这方面的首选.基本上,如果你会用 JavaScript ,那么在一个名为 Gruntfile.js (或者 Gruntfile)的文件中用 Javascript 语言定义自动化任务是非常简单的过程,同时大量的

在现在的前端开发中,前后端分离.模块化开发.版本控制.文件合并与压缩.mock数据等等一些原本后端的思想开始逐渐渗透到“大前端”的开发中.前端开发过程越来越繁琐,当今越来越多的网站已经从网页模式进化到了 Webapp 模式.它们运行在现代的高级浏览器里,使用 HTML5. CSS3. ES6 等更新的技术来开发丰富的功能,网页已经不仅仅是完成浏览的基本需求,并且Webapp通常是一个单页面应用(SPA),每一个视图通过异步的方式加载,这导致页面初始化和使用过程中会加载越来越多的 JavaScri

gulp相关插件: 1.del / gulp-clean 删除文件,用于清空文件 2.browser-sync 用于自动刷新浏览器 3.gulp-htmlmin 用于压缩html 4.gulp-clean-css / gulp-cssnano 压缩css gulp-autoprefixer 给css属性自动增加浏览器前缀 5.gulp-uglify 压缩js 6.gulp-replace 替换路径 7.gulp-base64 将小背景图转换为base64的形式,可以自己设置最大多少尺寸转为bas

Gulp有5个基本方法:src.dest.task.run.watch Gulp.src()      gulp模块的src方法,用于产生数据流.它的参数表示索要处理的文件,一般有以下几种形式: js/app.js:指定确切的文件名 js/*.js:某个目录所有后缀为js的文件 js/**/*.js:某个目录及其所有子目录中的所有后缀为js的文件 !js/app.js:除了js/app.js以后的所有文件 *.+(js|css):匹配项目更目录下,所有后缀为js/css的文件      src方