摘要: Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭建web服务器 文件保存时自动重载浏览器 使用预处理器如Sass、LESS 优化资源,比如压缩CSS、JavaScript、压缩图片 当然Gulp能做的远不止这些。如果你够疯狂,你甚至可以使用它搭建一个静态页面生成器。Gulp真的足够强大,但你必须学会驾驭它。 这是这篇文章的主要目的。帮助你了解Gulp的基础用法,助你早日完成一统天下的大业。 在我们深入了解之前,我们先来说说为什么是Gulp。 为什么是Gulp? 类似Gulp的工具,我们通常称之为构建工具。如今最流行的两个构建工具是Gulp和Grunt。 已...

什么是gulp?

gulp是新一代的前端项目构建工具,你可以使用gulp及其插件对你的项目代码(less,sass)进行编译,还可以压缩你的jscss代码,甚至压缩你的图片,gulp仅有少量的API,所以非常容易学习。 gulp 使用 stream 方式处理内容。Node催生了一批自动化工具,像Bower,Yeoman,Grunt等。

gulp和grunt的异同点

易于使用:采用代码优于配置策略,Gulp让简单的事情继续简单,复杂的任务变得可管理。
高效:通过利用Node.js强大的流,不需要往磁盘写中间文件,可以更快地完成构建。
高质量:Gulp严格的插件指导方针,确保插件简单并且按你期望的方式工作。
易于学习:通过把API降到最少,你能在很短的时间内学会Gulp。构建工作就像你设想的一样:是一系列流管道。

因为gulp是用node.js写的,所以你需要在你的终端上安装好npmnpmnode.js的包管理器,所以先在你的机子上安装好node.js

gulp安装命令

sudo npm install -g gulp

在根目录下新建package.json文件

npm init .

安装gulp

npm install gulp --save-dev

安装好后再次输入gulp -v查看版本号,如下图显示则为成功:

安装插件

安装常用插件:

sass的编译                  (gulp-ruby-sass)
自动添加css前缀 (gulp-autoprefixer)
压缩css (gulp-minify-css)
js代码校验 (gulp-jshint)
合并js文件 (gulp-concat)
压缩js代码 (gulp-uglify)
压缩图片 (gulp-imagemin)
自动刷新页面 (gulp-livereload)
图片缓存,只有图片替换了才压缩 (gulp-cache)
更改提醒 (gulp-notify)
清除文件 (del)

安装这些插件需要运行如下命令:

$ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev

-save-save-dev可以省掉你手动修改package.json文件的步骤。

npm install module-name -save 自动把模块和版本号添加到dependencies部分
npm install module-name -save-dev 自动把模块和版本号添加到devdependencies部分

gulp命令

你仅仅需要知道的5个gulp命令

gulp.task(name[, deps], fn) 定义任务  name:任务名称 deps:依赖任务名称 fn:回调函数

gulp.run(tasks...):尽可能多的并行运行多个task

gulp.watch(glob, fn):当glob内容发生改变时,执行fn

gulp.src(glob):置需要处理的文件的路径,可以是多个文件以数组的形式,也可以是正则

gulp.dest(path[, options]):设置生成文件的路径

glob:可以是一个直接的文件路径。他的含义是模式匹配。
gulp将要处理的文件通过管道(pipe())API导向相关插件。通过插件执行文件的处理任务。

gulp.task('default', function () {...});

gulp.task这个API用来创建任务,在命令行下可以输入$ gulp [default],(中括号表示可选)来执行上面的任务。

gulp官方API文档:https://github.com/gulpjs/gulp/blob/master/docs/API.md

gulp 插件大全:http://gulpjs.com/plugins/

开始构建项目

在项目根目录下新建一个gulpfile.js文件,粘贴如下代码:

//在项目根目录引入gulp和uglify插件
var gulp = require('gulp');
var uglify = require('gulp-uglify'); gulp.task('compress',function(){
return gulp.src('script/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist'));
});

注:gulpfile.js文件名不可更改。
项目需要用到uglify和rename插件,执行以下命令安装:

npm install --save-dev gulp-uglify
npm install --save-dev gulp-rename

以我的为例,进入gulpfile.js所在目录:

cd /Users/trigkit4/gulp-test

然后输入:

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename'); gulp.task('compress',function(){
return gulp.src('script/*.js')
.pipe(uglify())
.pipe(rename('jquery.ui.min.js'))
.pipe(gulp.dest('dist'));
});

该命令会安装package.json下的全部依赖,如下图所示:

完整的gulpfile.js

// 载入外挂
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
clean = require('gulp-clean'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload'); // 样式
gulp.task('styles', function() {
return gulp.src('src/styles/main.scss')
.pipe(sass({ style: 'expanded', }))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('dist/styles'))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(gulp.dest('dist/styles'))
.pipe(notify({ message: 'Styles task complete' }));
}); // 脚本
gulp.task('scripts', function() {
return gulp.src('src/scripts/**/*.js')
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(gulp.dest('dist/scripts'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('dist/scripts'))
.pipe(notify({ message: 'Scripts task complete' }));
}); // 图片
gulp.task('images', function() {
return gulp.src('src/images/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('dist/images'))
.pipe(notify({ message: 'Images task complete' }));
}); // 清理
gulp.task('clean', function() {
return gulp.src(['dist/styles', 'dist/scripts', 'dist/images'], {read: false})
.pipe(clean());
}); // 预设任务
gulp.task('default', ['clean'], function() {
gulp.start('styles', 'scripts', 'images');
}); // 看守
gulp.task('watch', function() { // 看守所有.scss档
gulp.watch('src/styles/**/*.scss', ['styles']); // 看守所有.js档
gulp.watch('src/scripts/**/*.js', ['scripts']); // 看守所有图片档
gulp.watch('src/images/**/*', ['images']); // 建立即时重整伺服器
var server = livereload(); // 看守所有位在 dist/ 目录下的档案,一旦有更动,便进行重整
gulp.watch(['dist/**']).on('change', function(file) {
server.changed(file.path);
}); });

注:pipe()stream模块里传递数据流的一个方法,第一个参数为插件方法,插件会接收从上游流下的文件,进行处理加工后,再往下流。

gulp.task('任务名称', function () {
return gulp.src('文件路径')
.pipe(...)
.pipe(...)
// 直到任务的最后一步
.pipe(...);
});

如果想使用gulp直接启动服务器

添加gulp-connect

npm install gulp-connect --save-dev

添加task

gulp.task('webserver', function() {
connect.server({
livereload: true,
port: 8888
});
});

gulp插件

  • gulp-gh-pages:使用gulp来把markdown生成html文档并上传到git pages

https://github.com/shinnn/gulp-gh-pages


var gulp = require('gulp'); var ghPages = require('gulp-gh-pages'); gulp.task('deploy', function() { return gulp.src('./dist/**/*') .pipe(ghPages()); });
  • gulp-jade插件:将jade编译成html文件

  • gulp-less插件:将less编译成css文件


var less = require('gulp-less'); var path = require('path'); gulp.task('less', function () { return gulp.src('./less/**/*.less') .pipe(less({ paths: [ path.join(__dirname, 'less', 'includes') ] })) .pipe(gulp.dest('./public/css')); });
  • gulp-live-server 插件:方便的,轻量级的服务器


var gulp = require('gulp'); var gls = require('gulp-live-server'); gulp.task('serve', function() { //1. serve with default settings var server = gls.static(); //equals to gls.static('public', 3000); server.start(); //2. serve at custom port var server = gls.static('dist', 8888); server.start(); //3. serve multi folders var server = gls.static(['dist', '.tmp']); server.start(); //use gulp.watch to trigger server actions(notify, start or stop) gulp.watch(['static/**/*.css', 'static/**/*.html'], function (file) { server.notify.apply(server, [file]); }); });
  • gulp-livereload,可以实时保存刷新,那样就不用按F5和切换界面了

  • gulp-load-plugins:在你的package.json文件中自动加载任意的gulp插件


$ npm install --save-dev gulp-load-plugins

例如一个给定的package.json文件如下:


{ "dependencies": { "gulp-jshint": "*", "gulp-concat": "*" } }

gulpfile.js中添加如下代码:


var gulp = require('gulp'); var gulpLoadPlugins = require('gulp-load-plugins'); var plugins = gulpLoadPlugins();

plugins.jshint = require('gulp-jshint');

plugins.concat = require('gulp-concat');

  • gulp-babel:gulp 的babel插件,


$ npm install --save-dev gulp-babel babel-preset-es2015

使用方法:


const gulp = require('gulp');
const babel = require('gulp-babel'); gulp.task('default', () => {
return gulp.src('src/app.js')
.pipe(babel({
presets: ['es2015']
}))
.pipe(gulp.dest('dist'));
});

官方github: https://github.com/gulpjs/gulp

[转]gulp构建前端工程的更多相关文章

  1. Gulp构建前端自动化工作流之:常用插件介绍及使用

    在对Gulp有了一个初步的了解之后,我们开始构建一个较为完整的Gulp开发环境. 本文主要分为6个段落: 1. 构建项目目录结构(Directory Structure Build) 2. 插件介绍及 ...

  2. 使用Gulp构建前端自动化方案

    前言 在刚入门前端的时候,我们并不清楚前端有工具可以帮我们自动化打包压缩文件,当时只关注能实现功能就可以了,也不太在意前端性能优化的问题,随着项目功能的复杂,项目也变得越来越大,页面的执行速度也开始变 ...

  3. Gulp构建前端自动化项目

    类似于Grunt,gulp是另一个同样功能很强大的前端项目自动化利器. 下面是项目的效果:

  4. gulp构建前端开发环境

    1.gulp环境的安装 首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp: npm install -g gulp 2.建立文件夹 mkdir item 3.初始化项目: npm ...

  5. 如何利用gulp构建前端自动化

    1,使用 gulp.watch 来监听文件自动打包 在上篇文章中,介绍了如何利用webpack来为项目做打包编译等工作,其中介绍到在我们开发的时候,经常改动js,因为我们文件是引用编译后的js文件,若 ...

  6. node和gulp实现前端工程自动化(附:gulp常用插件)

    /** * 1. LESS编译 压缩 合并 * 2. JS合并 压缩 混淆 * 3. img复制 * 4. html压缩 */ // 在gulpfile中先载入gulp包,因为这个包提供了一些APIv ...

  7. gulp构建前端,压缩css,js文件,实现浏览器自动刷新

    一.安装node nodejs下载地址:https://nodejs.org/ nodejs自带npm模块管理器,安装完成之后打开dos命令窗口输入 node -v就能查看nodejs是否安装成成功 ...

  8. 【转】前端工程筹建NodeJs+gulp+bower

    转自:http://www.myexception.cn/javascript/1781968.html npm nodejs 安装过程中会自动安装npm,nodejs安装程序会在环境变量中添加两个变 ...

  9. 2.4 webpack + gulp 构建完整前端工作流

    在前面的两个小节中已经完整的讲了 webpack 和 gulp 相关的内容,本小节中将会结合二者构建一个完整的前端工作流,内容目录为: 前端工程结构和目标 前端工程目录结构 gulp clean gu ...

随机推荐

  1. linux samba 服务器 简单配置

    1. rpm -qa|grep samba 查看是否有samba 2.使用yum -y install samba 安装samba 服务 进入/etc/samba/ 使用vi smb.conf 修改配 ...

  2. 大熊君说说JS与设计模式之------代理模式Proxy

    一,总体概要 1,笔者浅谈 当我们浏览网页时,网页中的图片有时不会立即展示出来,这就是通过虚拟代理来替代了真实的图片,而代理存储了真实图片的路径和尺寸,这就是代理方式的一种. 代理模式是比较有用途的一 ...

  3. .NET跨平台:在mac命令行下用vim手写ASP.NET 5 MVC程序

    昨天在 Mac 上手写了一个最简单的 ASP.NET 5 程序,直接在 Startup.cs 中通过 Response.WriteAsync() 输出响应内容,详见 .NET跨平台:在Mac上跟着错误 ...

  4. Run Android on Your Netbook or Desktop

    Run Android on Your Netbook or Desktop Would you like to try out Google's Android OS on your netbook ...

  5. Nim教程【三】

    这是国内第一个关于Nim的系列教程 (至少我百度和必应是没有找到类似的教程) 先说废话 有人说 Golang的编译器/工具链也学互联网行业跟风拿用户当测试,简直一点素质没有. 还有人说 Go社区的风气 ...

  6. C语言中的内存分配与释放

    C语言中的内存分配与释放 对C语言一直都是抱着学习的态度,很多都不懂,今天突然被问道C语言的内存分配问题,说了一些自己知道的,但感觉回答的并不完善,所以才有这篇笔记,总结一下C语言中内存分配的主要内容 ...

  7. 喜迎2015年新年:坦克大战(Robocode)游戏编程比赛图文总结

    2015春节前,葡萄城的软件工程师以特有的方式来迎接新年——2015新年编程邀请赛. 邀请赛的初衷,是和大家一起,寻找编程最初的单纯的快乐.       在代码的世界里,添加动力,继续远航.      ...

  8. Jstat在分析java的内存GC时的应用

    jstat工具特别强大,有众多的可选项,详细查看堆内各个部分的使用量,以及加载类的数量.使用时,需加上查看进程的进程id,和所选参数. 执行:cd $JAVA_HOME/bin中执行jstat,注意j ...

  9. paip.函数式编程方法概述以及总结

    paip.函数式编程方法概述以及总结 1     函数式编程:函数式风格..很多命令式语言里支持函数式编程风格 1.1      起源 (图灵机,Lisp机器, 神经网络计算机) 1.2      函 ...

  10. 搭建wamp环境,数据库基础知识

    服务器管理软件php Apache.net IISjava Tomcat 服务器管理软件起到的作用:管理服务器工作,具体的工作如下:1.静态页面用户将请求发送到服务器,服务器中的服务器管理软件将请求发 ...