Code Monkey home page Code Monkey logo

webgulpcom's Introduction

webGulpCom文档说明


gulp的引入目的在于提高前端代码的编写效率(注:本环境基于nodejs,所以请先安装好nodejs再运行本工程)。

使用说明

第一步: 如果没有安装过插件执行运行webGulpCom下的install.cmd进行安装,如果安装过,忽略第一步。
第二步: 运行preject/demo中的run.cmd即可跑工程。

重点关注的文件

gulpfile.js                 gulp运行入口文件
config.js                   环境的所有配置信息都在这
install.cmd                 安装环境所有依赖插件
run.cmd                     启动gulp工程,开启服务器
publish.cmd                 发布工程到publish目录文件
clean.cmd                   清除生成的目标文件

环境目录结构

|– gulp                         gulp相关的所有任务、配置文件信息
     |- tasks                    gulp的所有任务文件目录
          |- cssTask.js          css生成、修改、删除的相关任务
          |- htmlTask.js         html生成、修改、删除的相关任务
          |- imagesTask.js       图片生成、修改、删除的相关任务
          |- scriptsTask.js      JavaScript生成、修改、删除的相关任务
          |- sprinteTask.js      雪碧图相关任务(包括web、手机端)
          |- pugTask.js          将所有pug文件编译成html文件
          |- scssTask.js         编译scss文件为css文件(所有文件合并到main.scss,然后编译成main.css)
          |- othersTask.js       为除以上文件目录外的所有目录提供文件拷贝功能
          |- util.js             消息提示等工具任务
     |- config.js                配置文件(工程所有配置信息都在这)
     |- css.handlebars           web端雪碧图生成格式文件
     |- phoneCss.handlebars      手机端端雪碧图生成格式文件
     |- phoneFontCss.handlebars  纯手机端端雪碧图生成格式文件
     |- iChoice.handlebars       ichoice任务雪碧图生成格式文件
|- node-modules                  node自动生成目录(所有安装本地插件都在这)
|- project                       工程放置位置
|- .csscomb.json                 css格式化格式(csscomb插件配置文件,可在官网直接生成,插件会自动调用,不需管)
|- gulpfile.js                   gulp运行入口文件
|- install.cmd                   插件安装运行文件
|- package.json                  node工程依赖插件关系包
|- postcss.config.js             postcss配置文件
|- README.md                     说明文档
|- README_plugins.MD             插件说明文档

单个工程目录结构(demo工程为例)

demo
|- src                           源文件目录
    |- *.html                    所有html文件
    |- module                    html模块目录
    |- js                        工程相关js文件目录
    |- images                    图片目录
    |- icons                     web端雪碧图源文件存放目录
    |- iconsphone                手机端雪碧图源文件存放目录(纯手机端也放在此目录下)
    |- css                       样式文件目录(包括css、scss)
    |- 其他                      支持其他目录创建(比如字体图标目录font)
|- clean.cmd                     清除生成的目标文件
|- publish.cmd                   发布工程到publish目录文件
|- run.cmd                       启动gulp工程,开启服务器

License

MIT © jiaolong

webgulpcom's People

Contributors

jiaolong1021 avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.