一.简介

gulp 是基于 Nodejs 的自动任务运行器,能自动化地完成javascript/coffee/sass/less/html/image/css等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。

在实现上, gulp 借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单.

二.配置文件

var gulp = require('gulp');
var del = require('del');//删除文件/文件夹
var rev = require('gulp-rev');//对文件名加MD5后缀
var nano = require('gulp-cssnano');//删除空白和注释,并且压缩代码
var uglify = require('gulp-uglify');//通过UglifyJS来压缩JS文件
var useref = require('gulp-useref');
var imagemin = require('gulp-imagemin');//压缩图片文件(包括PNG、JPEG、GIF和SVG图片)
var revCollector = require('gulp-rev-collector');//路径替换
var browserSync = require('browser-sync').create();//静态文件服务器,同时也支持浏览器自动刷新
var gulpSequence = require('gulp-sequence');
var uncss = require('gulp-uncss');
var htmlmin = require('gulp-htmlmin');
var base64 = require('gulp-base64');
var changed = require('gulp-changed');
var postcss = require("gulp-postcss");//css预编译器
var sprites = require('postcss-sprites').default;//CSS精灵
var autoprefixer = require('autoprefixer');//自动补全浏览器兼容性前缀
var cssgrace = require('cssgrace');//CSS后处理工具,hackIE var SRC_DIR = './src/';
var PKG_DIR = './tmp/pkg/';
var REV_DIR = './tmp/rev/';
var DST_DIR = './dist/';
var UNCSS_REG = [/.advise/, /.block/, /.g-bd .m-view-2 .category li:nth-child/, /^.g-bd ul li .info/, /.hljs/]; gulp.task('clean', function() {
return del(['dist', 'tmp']);
}); /*
* 合并请求
* <!-- build:css ../css/index.pkg.css --><!-- endbuild -->
* <!-- build:js ../js/index.pkg.js --><!-- endbuild -->
*/
gulp.task('pkg', function() {
return gulp.src(SRC_DIR + 'view/*.html')
.pipe(useref())
.pipe(gulp.dest(PKG_DIR + 'view/'));
}); /*
* 移动非jpg/png资源到img文件夹
*
*/
gulp.task('move-img-other', function() {
return gulp.src([SRC_DIR + 'img/**/*.*!(jpg|png)', SRC_DIR + 'component/img/**/*.*!(jpg|png)'])
.pipe(gulp.dest('./tmp/pkg/img/'));
}); /*
* 压缩IMG
*
*/
gulp.task('min-img', function() {
return gulp.src([SRC_DIR + 'img/**/*.*(jpg|png)', SRC_DIR + 'component/img/**/*.*(jpg|png)'])
.pipe(imagemin())
.pipe(gulp.dest('./tmp/pkg/img/'));
}); /*
* 压缩CSS(PC)
*
*/
gulp.task("min-css-pc", function() {
// PostCSS
var processors = [
sprites({
'stylesheetPath': PKG_DIR + 'css/',
'spritePath': PKG_DIR + 'img/'
}),
autoprefixer({
browsers: ['> 1%', 'last 2 versions', 'ie 6-11']
}),
cssgrace
];
return gulp.src([PKG_DIR + 'css/**/*.css'])
.pipe(nano({
discardComments: {
removeAll: true
}
}))
.pipe(postcss(processors))
.pipe(gulp.dest(PKG_DIR + 'css/'))
}); /*
* 压缩CSS(Mobile)
*
*/
gulp.task("min-css-mobile", function() {
// PostCSS
var processors = [
autoprefixer({
browsers: ['> 1%', 'last 2 versions']
})
];
return gulp.src([PKG_DIR + 'css/**/*.css'])
.pipe(uncss({
html: [PKG_DIR + '**/*.html'],
ignore: UNCSS_REG
})).pipe(nano({
discardComments: {
removeAll: true
}
}))
.pipe(postcss(processors))
.pipe(gulp.dest(PKG_DIR + 'css/'))
}); /*
* 压缩JS
*
*/
gulp.task('min-js', function() {
return gulp.src(PKG_DIR + 'js/**/*.js')
.pipe(uglify())
.pipe(gulp.dest(PKG_DIR + 'js/'));
}); /*
* 版本化IMG
*
*/
gulp.task('rev-img', function() {
return gulp.src(PKG_DIR + 'img/**/*')
.pipe(rev())
.pipe(gulp.dest(REV_DIR + 'img/'))
.pipe(rev.manifest())
.pipe(gulp.dest(REV_DIR + 'img/'));
}); /*
* 版本化CSS
*
*/
gulp.task('rev-css', function() {
return gulp.src(PKG_DIR + 'css/**/*')
.pipe(rev())
.pipe(gulp.dest(REV_DIR + 'css/'))
.pipe(rev.manifest())
.pipe(gulp.dest(REV_DIR + 'css/'));
}); /*
* 版本化JS
*
*/
gulp.task('rev-js', function() {
return gulp.src(PKG_DIR + 'js/**/*')
.pipe(rev())
.pipe(gulp.dest(REV_DIR + 'js/'))
.pipe(rev.manifest())
.pipe(gulp.dest(REV_DIR + 'js/'));
}); /*
* 收集图片到CSS
*/
gulp.task('col-css', function() {
return gulp.src([REV_DIR + 'img/*.json', REV_DIR + 'css/*.css'])
.pipe(revCollector())
.pipe(gulp.dest(DST_DIR + 'css/'));
}); /*
* 移动IMG文件到目标文件夹
*/
gulp.task('col-img', function() {
return gulp.src([REV_DIR + 'img/*', '!' + REV_DIR + '/img/*.json'])
.pipe(gulp.dest(DST_DIR + 'img/'));
}); /*
* 移动JS文件到目标文件夹
*/
gulp.task('col-js', function() {
return gulp.src(REV_DIR + 'js/*.js')
.pipe(gulp.dest(DST_DIR + 'js/'));
}); /*
* 收集资源到HTML
*/
gulp.task('col-html', function() {
return gulp.src([REV_DIR + '**/*.json', PKG_DIR + 'view/*.html'])
.pipe(revCollector())
.pipe(htmlmin({
// collapseWhitespace: true,
removeComments: true
}))
.pipe(gulp.dest(DST_DIR + 'view/'));
}); /*
* 图片base64
*/
gulp.task('base64', function() {
return gulp.src(PKG_DIR + '/**/*.css')
.pipe(base64({
extensions: ['svg', 'png', /\.jpg#datauri$/i],
}))
.pipe(gulp.dest(PKG_DIR));
}); /*
* 移动mock文件夹
*/
gulp.task('move-mock', function() {
return gulp.src(SRC_DIR + 'mock/**/*')
.pipe(gulp.dest(DST_DIR + 'mock/'));
}); /*
* 静态服务器
*/
gulp.task('bs', function() {
browserSync.init({
files: "**", //监听整个项目
open: "external",
server: {
baseDir: "./dist/",
index: 'view/index.html'
}
});
}); /*
* 静态服务器(代理)
*/
gulp.task('bsp', function() {
browserSync.init({
proxy: "127.0.0.1"
});
}); /*
* PC打包方案
*/
gulp.task('pc', gulpSequence(
'clean', 'pkg', 'min-img',
['min-img', 'min-css-pc', 'min-js'], 'move-img-other',
['rev-img', 'rev-css', 'rev-js'],
['col-img', 'col-css', 'col-js', 'col-html'],
'move-mock', 'bs'
)); /*
* Mobile打包方案
*/
gulp.task('mobile', gulpSequence(
'clean', 'pkg', 'min-img', 'base64', 'move-img-other',
['min-img', 'min-css-mobile', 'min-js'],
['rev-img', 'rev-css', 'rev-js'],
['col-img', 'col-css', 'col-js', 'col-html'],
'move-mock', 'bs'
)); gulp.task('default', ['pc'], function() {
return del(['tmp/']);
});

Gulp(一)的更多相关文章

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

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

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

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

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

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

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

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

  5. gulp详细入门教程

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

  6. 做一个gulp+webpack+vue的单页应用开发架子

    1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...

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

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

  8. gulp初学

    原文地址:gulp初学 至于gulp与grunt的区别,用过的人都略知一二,总的来说就是2点: 1.gulp的gulpfile.js  配置简单而且更容易阅读和维护.之所以如此,是因为它们的工作方式不 ...

  9. gulp批量打包文件并提取公共文件

    gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器. browseriyf是模块化打包工具. 一般情况下,Browserify 会把所有的模块打包成单个文件.单个文件在大多数情况下是 ...

  10. 使用gulp解决RequireJS项目前端缓存问题(二)

    1.前言 这一节,我们主要解决在上一节<使用gulp解决RequireJSs项目前端缓存问题(一)>末尾提到的几个问题: 对通过require-config.js引入的js文件修改后,没有 ...

随机推荐

  1. Unity 官方 Demo: 2DPlatformer 的 SLua 版本。

    9月份时,趁着国庆阅兵的假期,将 Unity 官方 Demo: 2DPlatformer 移植了一个 SLua 版本,并放在了我的 GitHub 账号下:https://github.com/yauk ...

  2. log4j的使用方法

    1.Log4j是什么? Log4j可以帮助调试(有时候debug是发挥不了作 用的)和分析 2.Log4j的概念 Log4j中有三个主要的组件,它们分别是 Logger.Appender和Layout ...

  3. [SAM4N学习笔记]LED点灯程序

    一.准备工作:      将上一节搭建的工程模板复制一份,命名为"1.blink",这作为我们开发的第一个程序. 二.程序编写:      板子上只有一个可控制的LED,就是LED ...

  4. 一步一步写一个简单通用的makefile(四)--写一个通用的makefile编译android可执行文件

    通常要把我们自己的的代码编译成在android里面编译的可执行文件,我们通常是建一个文件夹 . ├── Android.mk ├── Application.mk ├── convolve.cl ├─ ...

  5. HDU 4722 Good Numbers

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4722 Good Numbers Time Limit: 2000/1000 MS (Java/Othe ...

  6. hdoj1754 I Hate It【线段树区间最大值维护+单点更新】

    I Hate It Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  7. nginx日志格式含义

  8. Java SE Eclipse中引入第三方jar及class

    使用eclipse开发Java SE 总免不了需要引入第三方的jar或者calss文件.这里给大家说一下如何在eclipse中引入第三方jar或者calss文件. 让我们先了解一下eclipse项目中 ...

  9. Android-用webservice连接sqlserver数据库

    以前做的东西,只要用数据库的都是在项目里自己重新做一份数据.但是这种方法是很不可取的,首先,手机内存不会很大,把数据表建在项目里无疑又增大了程序.这样一来手机的运行速度可想而知.其次,数据大的时候还是 ...

  10. C# 动态创建出来的窗体间的通讯 delegate3

    附件1:http://files.cnblogs.com/xe2011/CSharp_WindowsForms_delegate03.rar 一个RTF文件管理器 描述 Form2,Form3,For ...