之前前端代码部署时用的是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. Sliding Window - The Smallest Window II(AIZU) && Leetcode 76

    http://judge.u-aizu.ac.jp/onlinejudge/description.jsp?id=DSL_3_B For a given array a1,a2,a3,...,aNa1 ...

  2. JS二维数组的写法以及注意事项

    最终数组:"line":[ { "Name":"WK_CT", "Sex":"CT", " ...

  3. Docker中的三个基本概念容器（container）、镜像（image）和仓库（registry）之间有什么关系？

    Docker镜像是一个特殊的文件系统,除了提供容器运行时所需的程序.库.资源.配置等文件外,还包含了一些为运行时准备的一些配置参数(如匿名卷.环境变量.用户等).镜像不包含任何动态数据,其内容在构建之 ...

  4. 手动创建maven项目+cmd+webapp+tomcat

    1.创建文件夹 2.在刚刚创建的文件夹目录下:创建一个scr文件夹和pom.xml文件 3.在pom.xml配置 <?xml version="1.0" encoding=& ...

  5. idea中将项目转换成Maven项目

    第一步:项目右键->Add Framework... 选择maven ok 这样就成功转换成了一个maven项目

  6. NodeJS中常见异步接口定义（get、post、jsonp）

    越来越多的人在使用nodeJS,作为一门服务端语言,我们不可避免的要写异步接口(ajax和jsonp).再次强调ajax和jsonp是两个概念,但是由于jquery的封装,使这两种异步接口的调用方式, ...

  7. override与重载的区别

    override与重载的区别override 与重载的区别,重载是方法的名称相同.参数或参数类型不同,进行多次重载以适应不同的需要 Override 是进行基类中函数的重写.

  8. java常量池概念【转】

    http://blog.csdn.net/olanlanxiari/article/details/8104505

  9. html5的canvas绘制线条，moveTo和lineTo详解

    今天在看html5,里面新增的属性有一个canvas,它相当于一个画布你可以用js在里面画你想要的效果!我在w3c的手册里面看到用moveTo和lineTo绘制线条讲的不是很清楚,尤其是moveTo和 ...

  10. NOIP PJ游记

    Day -1 感觉自信满满,一等奖应该稳了,毕竟初一时我这么菜都拿了二等奖,然后就睡觉了... Day 1 在大巴上玩元气骑士可开心了,车上欢欢喜喜,到了考场,一眼看题,以为很简单. T1硬模拟... ...