zoukankan      html  css  js  c++  java
  • Gulp自动化构建工具的简单使用

    相关网站
    gulp官方网址:http://gulpjs.com
    gulp中文网站:http://www.gulpjs.com.cn/
    gulp插件地址:http://gulpjs.com/plugins
    gulp 官方API:https://github.com/gulpjs/gulp/blob/master/docs/API.md
    gulp 中文API:http://www.ydcss.com/archives/424

    一、gulp特点:
    易于使用
    通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理构建快速

    构建快速
    利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。

    插件高质
    Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。

    易于学习
    通过最少的 API,掌握 Gulp 毫不费力,构建工作尽在掌握:如同一系列流管道。

    二、gulp安装

    1. 全局安装 gulp:
    $ npm install --global gulp
    
    2. 作为项目的开发依赖(devDependencies)安装:
    $ npm install --save-dev gulp
    
    3. 在项目根目录下创建一个名为 gulpfile.js 的文件:
    var gulp = require('gulp');
    
    gulp.task('default', function() {
      // 将你的默认的任务代码放在这
    });
    
    4. 运行 gulp:
    $ gulp
    默认的名为 default 的任务(task)将会被运行,在这里,这个任务并未做任何事情。
    想要单独执行特定的任务(task),请输入 gulp <task> <othertask>。
    

    三、gulp简单使用
    1、运行多个任务
    一个包含任务列表的数组,这些任务会在你当前任务运行之前完成。

    gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
      // 做一些事
    });
    

    例如,有两个 task,"one" 和 "two",并且你希望它们按照这个顺序执行:
    a. 在 "one" 中,你加入一个提示,来告知什么时候它会完成:可以再完成时候返回一个 callback,或者返回一个 promise 或 stream,这样系统会去等待它完成。
    b. 在 "two" 中,你需要添加一个提示来告诉系统它需要依赖第一个 task 完成。

    var gulp = require('gulp');
    // 返回一个 callback,因此系统可以知道它什么时候完成
    gulp.task('one', function(cb) {
        // 做一些事 -- 异步的或者其他的
        cb(err); // 如果 err 不是 null 或 undefined,则会停止执行,且注意,这样代表执行失败了
    });
    // 定义一个所依赖的 task 必须在这个 task 执行之前完成
    gulp.task('two', ['one'], function() {
        // 'one' 完成后
    });
    gulp.task('default', ['one', 'two']);
    

    2、gulp.watch监控文件的变动
    gulp.watch(glob[, opts], tasks)
    用来指定具体监控哪些文件的变动。

    四、gulp插件

    gulp-minify-css【更新为gulp-clean-css】 http://www.ydcss.com/archives/41
    使用gulp-minify-css压缩css文件,减小文件大小,并给引用url添加版本号避免缓存。重要:gulp-minify-css已经被废弃,请使用gulp-clean-css,用法一致。

    gulp-less http://www.ydcss.com/archives/34
    使用gulp-less插件将less文件编译成css,当有less文件发生改变自动编译less,并保证less语法错误或出现异常时能正常工作并提示错误信息。

    gulp-concat http://www.ydcss.com/archives/83
    使用gulp-concat合并javascript文件,减少网络请求。

    gulp-htmlmin http://www.ydcss.com/archives/20
    使用gulp-htmlmin压缩html,可以压缩页面javascript、css,去除页面空格、注释,删除多余属性等操作

    gulp-livereload http://www.ydcss.com/archives/702
    gulp-livereload拯救F5!当监听文件发生变化时,浏览器自动刷新页面。【事实上也不全是完全刷新,例如修改css的时候,不是整个页面刷新,而是将修改的样式植入浏览器,非常方便。】特别是引用外部资源时,刷新整个页面真是费时费力。

    browser-sync http://www.browsersync.cn/#install
    Browsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。

    gulp-uglify http://www.ydcss.com/archives/54
    使用gulp-uglify压缩javascript文件,减小文件大小。

    gulp-autoprefixer http://www.ydcss.com/archives/94
    使用gulp-autoprefixer根据设置浏览器版本自动处理浏览器前缀。使用她我们可以很潇洒地写代码,不必考虑各浏览器兼容前缀。【特别是开发移动端页面时,就能充分体现它的优势。例如兼容性不太好的flex布局。】

    gulp-rev-append http://www.ydcss.com/archives/49
    使用gulp-rev-append给页面的引用添加版本号,清除页面引用缓存。

  • 相关阅读:
    oracle 批量修改表名 字段为大写197
    身份证附件上传样例197
    npm 设置源197
    manajo常用命令197
    vue 父组件向子组件传参197
    将BAT文件注册为服务197
    teaweb — linux 系统资源监控
    glances — linux 系统资源监控
    emitter-Client
    urlencode编码 — 为什么要编码
  • 原文地址:https://www.cnblogs.com/fozero/p/6959819.html
Copyright © 2011-2022 走看看