原文地址:gulp初学

至于gulp与grunt的区别,用过的人都略知一二,总的来说就是2点:

1、gulp的gulpfile.js  配置简单而且更容易阅读和维护。之所以如此,是因为它们的工作方式不同,gulp的流式构建使得gulpfile.js文件写起来并不是像Gruntfile.js一样完成一个个插件的配置那样多。对于这点我的理解还不是很深刻,只能暂时这样做一个比较吧,以后的学习接触多了应该就会深刻的体会到。

2、似乎gulp的上手比grunt更简单一些,或者说一个是轻量级一个是重量级的吧,不能说谁好谁坏,在不同的领域都有各自发挥的特点。

接下来是安装,很简单的2步即可:

1、创建自己的文件夹;

2、如果之前有在全局环境下装过gulp就不必再装了,只需

npm init

  

这会初始化一个package.json文件而不用手动创建,然后

npm install gulp --save-dev

  

将gulp安装到本项目文件夹,那么项目的文件将会是这样的

可是一不小心我遇到过这样的问题,不知道是什么原因,麻烦知道大侠的解释下。

我只知道解决办法是先删除node_modules文件夹和package.json文件,然后先执行

npm install gulp

  

然后再新建package.json,再npm install gulp –save-dev

/*====================================================================*/

gulpfile.js文件结构清晰,罗列一下常用的插件:

  1. 语法检查   (gulp-jshint
  2. 合并文件   (gulp-concat
  3. 压缩代码   (gulp-uglify
  4. 文件重命名(gulp-rename
npm install gulp-jshint gulp-concat gulp-uglify gulp-rename --save-dev

  

gulpfile.js文件如下

var gulp = require('gulp');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename'); // 语法检查
gulp.task('jshint', function(){
return gulp.src('src/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
}); // 编译Sass
// gulp.task('sass', function() {
// gulp.src('./scss/*.scss')
// .pipe(sass())
// .pipe(gulp.dest('./css'));
// }); // 合并文件之后压缩代码
gulp.task('minify', function(){
return gulp.src('src/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist'));
}); //监视文件变化
gulp.task('watch', function(){
gulp.watch('src/*.js', ['jshint', 'minify']);
}); //注册任务
gulp.task('default', ['jshint', 'minify', 'watch']);

  

多看多查多找,往往会有很多收获。

参考文章:

gulp API 文档

前端构建工具gulp入门教程

Gulp入门教程

Gulp, 比Grunt更好用的前端构建工具

gulp完全开发指南 => 快来换掉你的Grunt吧

gulp初学的更多相关文章

  1. gulp和webpack初探

    gulp 真正“流程”化工具 我记得实习刚刚进公司看到grunt,还是有点蒙,之前一直是本地开发,游览器F5,没想到前端也需要“编译工具”.所以grunt一直给我的感觉是“编译工具”,你写的很多代码还 ...

  2. 应用gulp工具构建个自动算rem布局的小例子

    因为最近可能需要做移动端rem布局,因为rem布局需要将px转化成rem,如果次都需要拿计算器算就太low了,所以就想到用less和gulp. 因为也是初学gulp,站点的文件结构还没想到太好,也只是 ...

  3. gulp打包压缩代码以及图片

    1.首先全局安装gulp 全局安装就不做介绍了 初学gulp,终于把常用的配置,api,语法弄明白了! gulp插件地址:http://gulpjs.com/plugins gulp官方网址:http ...

  4. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  5. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  6. 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一)

    相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常用 Gulp 插件汇总 ...

  7. 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二)

    前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 ...

  8. DDD初学指南

    去年就打算总结一下,结果新换的工作特别忙,就迟迟没有认真动手.主要内容是很多初学DDD甚至于学习很长时间的同学没有弄明白DDD是什么,适合什么情况.这世界上没有银弹,抛开了适合的场景孤立的去研究DDD ...

  9. gulp详细入门教程

    本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优 ...

随机推荐

  1. 关于.NET异常处理的思考

    年关将至,对于大部分程序员来说,马上就可以闲下来一段时间了,然而在这个闲暇的时间里,唯有争论哪门语言更好可以消磨时光,估计最近会有很多关于java与.net的博文出现,我表示要作为一个吃瓜群众,静静的 ...

  2. [BOT] 一种android中实现“圆角矩形”的方法

    内容简介 文章介绍ImageView(方法也可以应用到其它View)圆角矩形(包括圆形)的一种实现方式,四个角可以分别指定为圆角.思路是利用"Xfermode + Path"来进行 ...

  3. ES5对Array增强的9个API

    为了更方便的对Array进行操作,ES5规范在Array的原型上新增了9个方法,分别是forEach.filter.map.reduce.reduceRight.some.every.indexOf ...

  4. 无法向会话状态服务器发出会话状态请求。请确保 ASP.NET State Service (ASP.NET 状态服务)已启动,并且客户端端口与服务器端口相同。如果服务器位于远程计算机上,请检查。。。

    异常处理汇总-服 务 器 http://www.cnblogs.com/dunitian/p/4522983.html 无法向会话状态服务器发出会话状态请求.请确保 ASP.NET State Ser ...

  5. Could not create SSL connection through proxy serve-svn

    RA layer request failedsvn: Unable to connect to a repository at URL xxxxxx 最后:Could not create SSL ...

  6. 为.NET Core项目定义Item Template

    作为这个星球上最强大的IDE,Visual Studio不仅仅提供了很多原生的特性,更重要的是它是一个可定制的IDE,比如自定义Project Template和Item Template就是一个非常 ...

  7. [WARNING] Using platform encoding (GBK actually) to copy filtered resources, i.e. build is platform

    eclipse maven clean install 报错 1. 修改properties-->resource-->utf-8仍然报错 2.修改项目pom.xml文件,增加: < ...

  8. 分享两种实现Winform程序的多语言支持的解决方案

    因公司业务需要,需要将原有的ERP系统加上支持繁体语言,但不能改变原有的编码方式,即:普通程序员感受不到编码有什么不同.经过我与几个同事的多番沟通,确定了以下两种方案: 方案一:在窗体基类中每次加载并 ...

  9. Android Studio快捷键

      一.android studio 默认快捷键 刚开始接触一款开发软件,想必很想了解它的快捷方式,这会对你的编程起到很好的帮助,提高工作效率,接下来给你介绍下Android Studio一些常用的快 ...

  10. Android Retrofit 2.0 使用-补充篇

    推荐阅读,猛戳: 1.Android MVP 实例 2.Android Retrofit 2.0使用 3.RxJava 4.RxBus 5.Android MVP+Retrofit+RxJava实践小 ...