之前前端代码部署时用的是grunt，后来又出了个gulp工具，最近试用了一下，很方便，感觉比grunt简单好用，下面把一些常见的任务列一下，备用。

var gulp = require('gulp');

var sdir = '0.0.1';

var ddir = '0.0.1.release';

var gutil = require('gulp-util');

var clean = require('gulp-clean');

var minifyCSS = require('gulp-minify-css');

var concat = require('gulp-concat');

var uglify = require('gulp-uglify');

var processhtml = require('gulp-processhtml');

gulp.task('clean', function(){

  return gulp.src(['./'+ddir+'/*'], {read:false})

  .pipe(clean());

});

var filesToMove = [

    './'+sdir+'/data/**/*.*',

    './'+sdir+'/img/*.*'

];

gulp.task('move', ['clean'], function(){

  return gulp.src(filesToMove, {base: './'+sdir+'/' })

  .pipe(gulp.dest('./'+ddir+'/'));

});

gulp.task('concat-minify-css', ['clean'], function() {

  return gulp.src([

      './'+sdir+'/css/style.css',

      './'+sdir+'/css/animate.css'])

    .pipe(concat('index.css'))

    .pipe(minifyCSS())

    .pipe(gulp.dest('./'+ddir+'/css/'));

});

gulp.task('concat-uglify-script-index', ['clean'], function() {

   return gulp

      .src([

        "./"+sdir+"/js/jquery.js",

        "./"+sdir+"/js/main.js"])

      .pipe(concat('index.js'))

      .pipe(uglify())

      .pipe(gulp.dest('./'+ddir+'/js/'));

});

gulp.task('processhtml', ['clean'], function () {

  return gulp.src('./'+sdir+'/*.html')

    .pipe(processhtml())

    .pipe(gulp.dest('./'+ddir+'/'));

});

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

    gulp.start(

      'move',

      'concat-minify-css',

      'concat-uglify-script-index',

      'processhtml');

});

关于processhtml大家用的可能较少，这里简单地介绍一下。

例如我们有这样一个文件：

<!Doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>test</title>

    <link rel="stylesheet" type="text/css" href="css/base.css">

    <link rel="stylesheet" type="text/css" href="css/style.css">

</head>

<body>

    <div id="main"></div>

    <script src="js/jquery.js"></script>

    <script src="js/main.js"></script>

</body>

</html>

最终我们希望代码压缩合并后，输出这样的文件：

<!Doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>test</title>

    <link rel="stylesheet" type="text/css" href="css/index.css">

</head>

<body>

    <div id="main"></div>

    <script src="js/index.js"></script>

</body>

</html>

那么如何做呢，这里就要用到processhtml了，在需要替换的地方加个特殊标记，然后用processhtml进行替换处理，标记如下：

<!Doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>test</title>

    <!--build:css css/index.css -->

    <link rel="stylesheet" type="text/css" href="css/base.css">

    <link rel="stylesheet" type="text/css" href="css/style.css">

    <!--/build-->

</head>

<body>

    <div id="main"></div>

    <!--build:js js/index.js-->

    <script src="js/jquery.js"></script>

    <script src="js/main.js"></script>

    <!--/build -->

</body>

</html>

这个工具还是挺好用的。

用gulp清除、移动、压缩、合并、替换代码的更多相关文章

  1. gulp完成javascript压缩合并,css压缩

    最近需要对项目进行优化,主要是对js的压缩合并和css文件的压缩,查找相关资料之后发现gulp可以实现相关的功能,特此分享一下使用心得. 1.安装gulp gulp是基于Node.js的前端构建工具. ...

  2. Gulp 之图片压缩合并

    同事需要处理很多的图片,由于UI那边提供图片比较大,为了性能好一点,程序包小一点,因此希望我帮忙做成小程序来完成此工作. 其实之前做过一个grunt写的图片压缩合并工具,当时是为了处理270多个国家/ ...

  3. gulp之css,js压缩合并加密替换

    为了防止客户端的静态资源缓存,我们需要每次更新css或js的时候,通过md5或时间戳等方式重新命名静态资源.让客户端可以重新请求资源,而不是从缓存里取.然后html模板里的src也要做相应的修改.当然 ...

  4. 前端构建工具 Gulp 压缩合并JS/CSS 并添加版本号、ES6转ES5

    Gulp 基于 Node.js 的前端构建工具,可以实现前端代码的编译(sass.less).压缩合并(JS.CSS).测试:图片的压缩:已经添加 JS 和 CSS 版本号,防止浏览器缓存. 1. 安 ...

  5. gulp实时编译less，压缩合并requirejs模块文件

    gulp的使用命令简单,就几个,gulp的简单使用教材可以参考一点的gulp使用教材(http://www.ydcss.com/archives/18). 下面就简单的介绍这些命令如何互相配合的完成前 ...

  6. gulp自动化压缩合并、加版本号解决方案

    虽然网上有很多的 gulp 构建文章,但是很多都已经随着 gulp 插件的更新无法运行了.因此,我写了这个比较简单的构建方案. 如果还不熟悉 gulp 的插件,可以阅读上一篇文章:精通gulp常用插件 ...

  7. grunt压缩合并代码

    module.exports = function(grunt) { // 配置 grunt.initConfig({ pkg : grunt.file.readJSON('package.json' ...

  8. Google Closure Compiler高级压缩混淆Javascript代码

    一.背景 前端开发中,特别是移动端,Javascript代码压缩已经成为上线必备条件. 如今主流的Js代码压缩工具主要有: 1)Uglify http://lisperator.net/uglifyj ...

  9. 编写gulpfile.js文件：压缩合并css、js

    使用gulp一共有四个步骤: 1. 全局安装 gulp: $ npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装: $ npm inst ...

随机推荐

  1. TP5.1：facade静态代理

    THINKPHP中有很多很多的facade静态代理,这些静态代理的位置在:thinkphp\think\facade文件夹下 1.在app\commom中新建一个文件,名为:Test.php,表示被代 ...

  2. Linux 使用第三方邮箱发邮件的设置

    mail命令在Ubuntu下是需要安装的,使用下条命令进行安装: sudo apt-get install heirloom-mailx 在CentOS 下安装则是: yum install mail ...

  3. QR分解与最小二乘（转载自AndyJee）

    转载网址:http://www.cnblogs.com/AndyJee/p/3846455.html 主要内容: 1.QR分解定义 2.QR分解求法 3.QR分解与最小二乘 4.Matlab实现 一. ...

  4. 获取url中的某个字段的值

    function getUrl(name, url) { url = url || window.location.search; var reg = new RegExp("(^|& ...

  5. Android（java）学习笔记141：Android下的逐帧动画（Drawable Animation）

    1. 帧动画: 帧动画顾名思义,一帧一帧播放的动画就是帧动画. 帧动画和我们小时候看的动画片的原理是一样的,在相同区域快速切换图片给人们呈现一种视觉的假象感觉像是在播放动画,其实不过是N张图片在一帧一 ...

  6. 字符串查找算法的改进-hash查找算法

    字符串查找即为特征查找: 特征即位hash: 1.将待查找的字符串hash: 2.在容器字符串中找头字符匹配的字符串,并进行hash: 3.比较hash的结果:相同即位匹配: hash算法的设计为其中 ...

  7. VERITA Netbackup日常巡检详细说明

    VERITA备份日常监控 一． 相关检查方法.命令 1.1 启动NBU的图形管理界面: /usr/openv/netbackup/bin/jnbSA & 1.2字符界面命令: 1.2.1cat ...

  8. stixel提升思路总结

    1.用psmnet获得更好的disparity 2.用edgebox获得整个rgb图片的边缘,然后通过原本的stixel的上下边缘去寻找最优,用两个的边缘去重新得到一个新的边缘,但获得的轮廓不仅仅是外 ...

  9. c++参数传递的三种方式

    一般来说C++中参数传递有三种方式:值传递.指针传递.引用传递 1.值传递——传值 值传递是最常见的一种参数传递的方式,但是对初学者来说也最容易出错.如下例: #include<iostream ...

  10. MySQL游标(cursor) 定义及使用

    概念 游标(Cursor)它使用户可逐行访问由SQL Server返回的结果集. 使用游标(cursor)的一个主要的原因就是把集合操作转换成单个记录处理方式. 用SQL语言从数据库中检索数据后,结果 ...