gulp 和grunt这两个是我知道的自动构建工具,但是说实话都没在项目中用过,不太清楚自动化构建是什么意思,

1、grunt和gulp有什么相同点和不同点?

  (1)、易于使用:采用代码优于配置策略,gulp让简单的事情继续简单,复杂的任务变得可管理;

  (2)、高效:通过利用Node.js强大的流,不需要网磁盘写中间文件,可以更快地完成构建;

  (3)、高质量:gulp严格的插件知道发昂真,确保插件简单并且按照你期望的方式工作;

  (4)、易于学习:通过把API降到最少,你能在很短的时间内学会gulp,构建工作就像你设想的一样:是一系列流管道;

  (5)、易用gulp相比grunt更简洁,而且遵循代码优于配置的策略,维护gulp更像是写代码。高效gulp相比grunt更有设计感,核心设计基于unix流的概念,通过管道连接,不需要写中间件,高质量gulp的每个插件只完成一个功能,这也似乎unix的设计原则之一,各个功能通过流进行整合并完成复杂的任务。例如:grunt的imagemin插件不仅压缩图片,同事还包括缓存功能。他表示,在gulp中,缓存是另一个插件,可以被别的插件使用,这样就错金了插件的可重用性。易学gulp的核心API只有5个,掌握了5个API就学会了gulp,之后就可以通过管道流组合自己想要的任务。

2、如何使用gulp配置自己的项目

  (1)、想要在项目中使用gulp,就要全局安装gulp,执行命令如下

  npm install gulp -g

  这样就算是在计算机上安装了全局gulp,也就意味着可以使用Gulp中的模块了(必须全局安装,局部安装,cmp中gulp命令不能执行)。

  (2)、建立文件夹

      新建文件夹managres,managers下面新建两个文件夹dist和src,一个表示源头,一个表示输出,然后通关过git bash工作在managers文件夹下执行命令

      nom init     ---用于生成package.json文件

    

    回车之后,gulpManagers下目录结构如下图:

    

    (3)、开始安装需要用到的插件,这里我做几个中要的说明一下,其他的插件可以自己去摸索

    npm install --save-dev gulp(save-dev指的是把gulp配置到本项目的package.json文件下,因为你要使用人家的插件,肯定需要他来指挥)

    npm install --save-dev gulp-uglify(这个插件是用来压缩js的)

    npm install --save-dev gulp-ruby-sass(这个是用来编译sass的)

    npm install --save-dev gulp-notify(这个是提醒插件)

3、讲解一下gulp总要的4个API

  gulp.src();表示文件的来源,或者说是读取文件

  gulp.dest();表示文件的输出,也就是输出文件

  gulp.task();表示要执行的任务

  gulp.watch();表示要监听的任务

4、接着讲压缩js

  在gulpManagers文件夹下新建gulifile.js,在src文件夹下新建文件夹js,并在js文件夹下新建文件index.js

  (1)、如何去自己写人物文件(gulpfile.js)

    

//引入需要的插件
var gulp =require('gulp');
var uglify=require('gulp-uglify');
var notify=require('gulp-notify'); //布置任务
gulp.task('uglify',function(){
gulp.src('src/js/**/*.js') //读取项目中的js文件
.pipe(uglify()) //利用插件进行压缩
.pipe(gulp.dest('dist/js')) //压缩过后偶输出文件到指定目录
.pipe(notify({message:'uglify is ok'})) //提醒你:压缩任务完成了
})

  (2)、现在dist文件夹下面新生成了一个js文件夹,里面有一个index.js文件,这个就是压缩后的文件了。

5、监听js的改变

  或许有人会问,如果的js文件变动了,能不能监听到呢?

  在gulp你可以通过watch来监听js的改变

  (1)、将gulpfile.js文件里面原本的东西注释掉,将dist文件下所有东西删除掉,新写gulpfile.js文件

//引入需要的插件
var gulp=require('gulp');
var uglify=require('gulp-uglify');
var notify=require('gulp-notify'); //布置任务
gulp.task('uglify',function(){
gulp.src('src/js/**/*.js') //读取项目中的js文件
.pipe(uglify()) //利用插件进行压缩
.pipe(gulp.dest('dist/js')) //压缩过后输出到文件指定目录
.pipe(notify({message:"uglify is ok"})) //提醒任务完成
}) gulp.task('watch',function(){
gulp.watch("src/js/**/*.js",["uglify"]) //监听文件夹下js变化,执行压缩任务
})
  (2)、在cmd中执行watch:gulp watch 回车,现在去src/js/index.js下面改动内容,点击保存的时候,会出现提醒消息:uglify is ok。
并且在dist/js下面多了一个新压缩的index.js文件。(多次改动src/js下index.js文件,点击保存,执行压缩,dist/js/index.js一直都似乎一份最新的文件,并不会每次保存一份)。

前端自动化构建工具-gulp的更多相关文章

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

    前端自动化构建工具gulp的使用总结 博主最近偶的空闲,在此对gulp的使用做一个总结,让小伙伴知道如何合理的使用gulp以及gulp的使用技巧. 谈到gulp,有人可能就会想到另外一个构建工具gru ...

  2. 前端自动化构建工具——gulp

    gulp是基于流的前端自动化构建工具. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到 ...

  3. 前端自动化构建工具 Gulp 使用

    一个月没写博客了,今天有时间,就写个gulp的入门使用吧.. 简介:gulp是一个前端自动化构建工具,可以实现代码的检查.压缩.合并……等等,gulp是基于Node.js的自动任务运行器 一.安装No ...

  4. 前端自动化构建工具--Gulp&&Webpack

    前端构建工具的作用可以认为是对源项目文件或资源进行文件级处理,将文件或资源处理成需要的最佳输出结构和形式. 在处理过程中,我们可以对文件进行模块化引入.依赖分析.资源合并.压缩优化.文件嵌入.路径替换 ...

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

    一.我对gulp的初期理解 是一种前端辅助开发工具 可以帮你把js,css,img等文件 合并.压缩,图片好像是合并为精灵图,合并为精灵图之后,还会生成一个css样式表. 官方解说是:基于流的自动化构 ...

  6. 前端自动化构建工具——gulp环境搭建教程

    gulp是前端工程化的工具,它可以对html,css,js等代码和图片进行压缩,也可以对sass和less等预处理语言进行编译,代码部署.gulp学起来简单,用起来方便,大大提高我们工作效率. 这里可 ...

  7. 前端自动化构建工具gulp记录

    一.安装 1)安装nodejs 通过nodejs的npm安装gulp,插件也可以通过npm安装.windows系统是个.msi工具,只要一直下一步即可,软件会自动在写入环境变量中,这样就能在cmd命令 ...

  8. 前端自动化构建工具gulp使用

    1. 全局安装 gulp: $ npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装: $ npm install --save-dev ...

  9. 前端自动化构建工具gulp

    1.gulp的安装 首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp: npm install -g gulp 全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次 ...

随机推荐

  1. 【EasyUI】Tabs常用操作及href和content的异同

    说明:EasyUI版本1.3.4 ,jQuery版本1.8.3 EasyUI Tabs常见使用方式 按照官方文档的说法,创建Tabs的方式有两种: 静态页面标签 动态JS代码 静态方式主要用于创建一些 ...

  2. Spring MVC文件上传教程

    1- 介绍 这篇教程文章是基于 Spring MVC来实现文件的上传功能,这里主要是实现两个功能:1.上传单个文件并将其移动到对应的上传目录:2.一次上传多个文件并将它们存储在指定文件夹下,接下来我们 ...

  3. redis python交互和实际例子

    import redis try: r=redis.StrictRedis(host='localhost',port=6379) except Exception,e: print e.messag ...

  4. CentOS下使用MyTop实时监控MySQL

    CentOS下使用MyTop实时监控MySQL MyTop的项目页面为:http://jeremy.zawodny.com/mysql/mytop/ MyTop安装 $ yum -y install ...

  5. matlab小数分数转换

    >> format short      %%%% MATLAB默认格式,小数显示 >> format rat    %%%%% 转成分数表示

  6. FTP(File Transfer Protocol)是什么?

    文件传输协议 FTP(File Transfer Protocol),是文件传输协议的简称.用于Internet上的控制文件的双向传输.同时,它也是一个应用程序(Application).用户可以通过 ...

  7. DB facade实现CURD

    数据表 CREATE TABLE IF NOT EXISTS students( `id` INT AUTO_INCREMENT PRIMARY KEY, `name` VARCHAR(255) NO ...

  8. Ubuntu下MongoDB的安装和使用

    本博文介绍了MongoDB,并详细指引读者在Ubuntu下MongoDB的安装和使用.本教程在Ubuntu14.04下测试通过.(2017.09.07) 安装MongoDB MongoDB安装很简单, ...

  9. Android中android:layout_alignParentBottom标签不生效

    Android中一个奇怪的问题 Android 6.0中android:layout_alignParentBottom设置后不生效. 详见:https://code.google.com/p/and ...

  10. 《从零开始学Swift》学习笔记(Day 20)——函数中参数的传递引用

    原创文章,欢迎转载.转载请注明:关东升的博客 参数的传递引用 类是引用类型,其他的数据类型如整型.浮点型.布尔型.字符.字符串.元组.集合.枚举和结构体全部是值类型. 有的时候就是要将一个值类型参数以 ...