之前前端代码部署时用的是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. 网页打开速度优化——HTTP请求头及响应头

    no-cache:不缓存过期的资源 no-store:不缓存 最近看了<图解HTTP>这本书,书上讲到了这两者的区别: no-cache从字面意义上很容易误解为不缓存,但是no-cache ...

  2. SAP Fiori里的List是如何做到懒加载Lazy load的

    今天一同事问我这个问题:S/4HANA Fiori应用里的列表,一旦Scroll到底部就会自动向后台发起新的请求把更多的数据读取到前台显示. 以Product Master这个应用为例,我点击搜索之后 ...

  3. IOS @property的参数说明

    1. @property的参数说明========================================ARC是苹果为了简化程序员对内存的管理,推出的一套内存管理机制使用ARC机制,对象的申 ...

  4. 【BZOJ3506】[CQOI2014] 排序机械臂（Splay）

    点此看题面 大致题意: 给你\(n\)个数.第一次找到最小值所在位置\(P_1\),翻转\([1,P_1]\),第二次找到剩余数中最小值所在位置\(P_2\),翻转\([2,P_2]\),以此类推.求 ...

  5. 2017.10.10 java中的继承与多态（重载与重写的区别）

    1. 类的继承 继承是面向对象编程技术的主要特征之一,也是实现软件复用的重要手段,使用继承特性子类(subclass) 可以继承父类(superclass)中private方法和属性,继承的目的是使程 ...

  6. 你视为意见领袖的大 V，可能只是个僵尸号

    今日导读 “高手在民间”这句话诚不欺我.互联网普及之后,民间大神在各大论坛如雨后春笋般涌现,忽而指点江山,笑谈国际风云,忽而算无遗策,狙击股市庄家,亦或退而求其次,美妆美食美颜,誓要带领少男少女冲在时 ...

  7. NVIDIA CUDA Library Documentation

    http://developer.download.nvidia.com/compute/cuda/4_1/rel/toolkit/docs/online/index.html 英伟达CUDA库说明文 ...

  8. CocoaAsyncSocket使用

    代理的.h文件 #import <Foundation/Foundation.h> #import "GCDAsyncSocket.h" typedef void(^S ...

  9. Vue 前端md5加密

    用户注册时将加密后的密码发送给后端存储 当登陆的时候,再将加密后的密码和数据库中加密的密码相匹配. npm: https://www.npmjs.com/package/crypto-browseri ...

  10. spring-mybatis整合项目 异常处理2

    org.apache.ibatis.builder.BuilderException: Error parsing Mapper XML. The XML location is 'com/imooc ...