之前前端代码部署时用的是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. 【转载】#349 - The Difference Between Virtual and Non-Virtual Methods

    In C#, virtual methods support polymorphism, by using a combination of the virtual and override keyw ...

  2. mysql数据库 thinkphp连贯操作where条件的判断不正确的问题

    前两天一直写一个基于thinkphp的东西,遇到从mysql数据库里select数据,where条件一直出现问题的情况.直接上代码: $history = M('history'); $suerId ...

  3. [pytorch] Pytorch入门

    Pytorch入门 简单容易上手,感觉比keras好理解多了,和mxnet很像(似乎mxnet有点借鉴pytorch),记一记. 直接从例子开始学,基础知识咱已经看了很多论文了... import t ...

  4. when 让你跳出异步回调噩梦 node.js下promise/A规范的使用

    其实关于promise 的博客,前端时间专门写了一篇关于 promise 规范的文章,promise规范 让 javascript 中的异步调用更加人性化. 简单回忆下: promise/A规范定义的 ...

  5. stixel-world代码解读

    下边缘的求法应该是使用的第二篇论文的方法 上边缘的求法应该是使用的第一篇论文的方法 这是求上边缘的代码: std::vector<float> integralMembership(vma ...

  6. IOError: [Errno 22] invalid mode ('rb') or filename: 'C

    dataset = scipy.io.loadmat('F:\test_data.mat') 报错 IOError: [Errno ] invalid mode ('rb') or filename: ...

  7. 第十五章 函数————函数的递归、生成器send 、匿名函数

    1.生成器send方法 send的工作原理 1.send发生信息给当前停止的yield 2.再去调用__next__()方法,生成器接着往下指向,返回下一个yield值并停止 例: persons=[ ...

  8. python基本使用时常见错误

    python基本使用时常见错误 字符编码错误 如果要学习计算机编程语言,首先就要搞懂字符编码,否则在以后的学习过程中,将会是一场噩梦.在一开始使用的时候,我就遇到了很多的关于字符编码的问题,做个简单的 ...

  9. computed--实时计算属性

    项目:https://github.com/ccyinghua/vue-node-mongodb-project/blob/master/07-shoppingCart.md 实时计算属性的compu ...

  10. 设置vim tab为4个空格

    Vim 编辑器默认tab为8个空格,但对于pythoner来说,必须要调整到4个空格. 方法如下: 在~/.vimrc文件中加入下面设置: set ts=4 #设置tabstop为4个空格 set e ...