之前前端代码部署时用的是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. ubuntu linux断点续传下载工具 uGet 的安装

    网址 http://ugetdm.com/downloads-ubuntu 使用命令行安装 sudo add-apt-repository ppa:plushuang-tw/uget-stable s ...

  2. 如何下载YouTube 8K视频

    随着科技的进步,人们对高清视频的要求越来越高,因此视频的分辨率也越来越高.从最开始的720P,到1080P,再到2K,进而到如今4K,不断地满足人们挑剔的胃口.4K分辨率的视频已经逐渐进入人们的生活中 ...

  3. 如何用代码填充S/4HANA销售订单行项目的数量字段

    我的任务是用代码生成S/4HANA销售订单(Sales Order)的行项目,并且填充对应的quantity(数量)值. 最开始我用了下面的代码,把quantity的值写入item字段target_q ...

  4. 认识http客户端

    最简单的http客户端就是我们的浏览器,浏览器地址输入baidu.com,就会返回响应内容,打开network,都是http请求,第一个就是www.baidu.com的请求,旁边第一个General就 ...

  5. 解决cdh4.5.0下 MAP任务看不到状态

    参考 http://qnalist.com/questions/772595/yarn-jobhistory-service 在mapreduce-site.xml中添加 <property&g ...

  6. 第一个AngularJS表达式实例

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  7. AngularJS 指循环数组对象

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  8. java 基础词汇 必须 第九天

    Collection 集合 List 列表集合 Set 不重复集合 Linked 链表 Vector 线程安全集合 Hash 哈希值 tree 树型结构 Map 键值对集合 add 增加 remove ...

  9. C++编程经验总结1

    面向对象的精髓: 主函数其实就是对于类的元素和动作的重新组合来进行一项活动. 一个思想概念:程设是清楚的,完美的. 数学是清楚的,是完美的. 物理是有趣的,尤其是量子物理 生物是清楚的,尤其是基因 外 ...

  10. 微信小程序之setData原理以及几点关于小程序的吐槽

    小程序不方便之处: 1: 想做个获取列表中每个item所在的对应滚动条的高度在哪里,或者元素本身的高度也不好获取,极其不方便,网上看的别人做的滚动条相关的,都是写死或者已知的item高度,目前没找到正 ...