Git Product home page Git Product logo

webdemo's Introduction

webdemo

webdemo: use bower gulp tools, minify/concat js/css,replace html link uri.

项目描述

本项目为一个前端项目模版,使用构建工具gulp实现对资源文件等压缩/合并,web服务启动等; 使用包管理工具bower管理项目依赖。

环境准备

安装node.js (6) 从官网下载安装文件:https://nodejs.org/
或者
源码安装:https://github.com/nodejs/node

下载代码

git clone https://github.com/xiangtao123/webdemo.git
或者手动下载
https://github.com/xiangtao123/webdemo

初始环境

配置环境变了:
vim /etc/profile

  • NODE_HOME=/usr/local/node6/
  • NODE_PATH=$NODE_HOME/lib/node_modules
  • export PATH=$NODE_HOME/bin:$NODE_PATH/npm/bin:$NODE_PATH/gulp/bin:$NODE_PATH/bower/bin:$PATH

sudo npm install -g yo
sudo npm install -g bower
sudo npm install --global gulp

更新依赖

cd webdemo
sudo npm update
bower update

构建项目

gulp init
gulp

启动服务

第一种

使用web服务器,例如:nginx/apache http等。

第二种

gulp dev-server(启动开发环境web服务)
gulp dist-server(启动发布环境web服务) 默认端口为:8000

构建流程

  • clean:清空dist目录;
  • init:转储src目录文件到dist目录;
  • minify-js:压缩src/js/*目录下的js文件转储到dist目录,合并dist/js/*目录下的js文件concatenated.min.js;
  • minify-css:压缩src/css目录下的css文件转储到dist目录,合并dist/css目录下的css文件concatendate.min.css;
  • html-replace:替换html的资源引用为合并之后的文件地址;
  • default:默认为:html-useref;
  • html-useref:根据html中资源引用,对资源进行压缩合并,替换资源引用资源地址;

目录结构

-app

--node_modules(gulp插件依赖)

--dist(压缩/合并后的js/css文件目录)

--src(项目源文件)

---js

----vendor(使用bower管理依赖的第三方资源)

---css

---img

---index.html

---favicon.ico

--package.json

--gulp.js

--bower.json

--gitignore

--README.md

CI jenkins 与 gulp 构建前端项目

  • 在jenkins所在服务器上初始化环境:node.js/yo/bower/gulp

  • Excute Shell :
    source /etc/profile
    cd ${WORKSPACE}
    npm update
    bower update --allow-root
    gulp.js init
    gulp.js

  • ssh publihers:
    source files : dist/**/*
    remove prefix: dist/
    remote directory: /var/www/webdemo/

webdemo's People

Contributors

xiangtao123 avatar

Watchers

 avatar  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.