前端项目构建yeoman (yo+gulp+bower)

需要安转的工具: nodejs  npm cnpm gulp bower yo git

1.gulp是基于nodejs,需要安装nodejs

2.npm 是包管理器,用来下载其他工具包插件的

安装教程:

http://blog.csdn.net/cjagkp/article/details/52160823

3.cnpm是国内npm的淘宝镜像,因为国内有墙,所以下载一些工具包要FQ而且速度慢,用cnpm会很快例如 下载 gulp-sass(后面要下载)。安装好npm后,命令行执行下面:

 npm install -g cnpm --registry=https://registry.npm.taobao.org 

4.gulp构建工具,方便开发的。

 安装gulp: npm install --save-dev gulp 

5.bower包管理器,用来下载jquery bootstrap等依赖工具

安装bower:npm install -g bower

6.git 用来从github上拉取query bootstrap等依赖工具。

http://www.runoob.com/git/git-install-setup.html

7.yo脚手架工具,用来构建yeoman的 ,yeoman由三部分组成:yo(脚手架工具)、gulp(构建工具)、bower(包管理器)。

全局安装yo  : npm install -g yo

具体构建参考:http://blog.fens.me/nodejs-yeoman-intro/
时间: 2024-08-29 00:35:11

前端项目构建yeoman (yo+gulp+bower)的相关文章

yeoman+grunt/gulp+bower构建angular项目

1 安装nodejs(最新版的 会包括npm)我的是6.2.0,安装好后 --- cmd ---   node -v打印版本号 2 安装git(省略) 3 cmd ----npm install -g yo grunt-cli bower(yo:用于安装项目框架生成,类似于maven的骨架:grunt:编译运行测试等:bwoer:插件管理,相当于jar包管理)总之分担了maven的各个功能,都下载成全局的 4 cmd  -----yo-----上下键选择 install a generator

前端项目中gulp的使用

在公司项目开发中,有一个前端项目,我们使用gulp来生成目标文件(css,js,html文件) 进入到这个项目目录中  C:\My Project\FrontEnd\TestBuilder 然后依次运行如下命令: npm install npm run build gulp  default (假如 gulpfile.js 中gulp的任务名字是 default) 原文地址:https://www.cnblogs.com/wphl-27/p/9626763.html

前端自动化构建工具

全局安装是把包安装在Node安装目录下的node_modules文件夹中,一般在 \Users\用户名\AppData\Roaming\ 目录下,可以使用npm root -g查看全局安装目录 本地(局部)安装是把包安装在指定项目(要在指定的根目录下输入命令)的node_modules文件夹下(若没有,会自动创建一个node_modules文件夹) 具体区别,推荐博文:  全局安装和本地(局部)安装的区别 本地安装可以让每个项目拥有独立的包,不受全局包的影响,方便项目的移动.复制.打包等,保证不

用gulp构建你的前端项目

前言 前端技术发展日新月异,随着模块化.组件化的提出,前端变得越来越复杂,静态资源越来越多,那么对静态资源的处理,如压缩,合并,去掉调试信息.. 如果还是人工去处理,效率非常之低且还容易出错,于是自动化的处理工具也就必然出现了.就像后端我们一般用maven管理项目,那么前端gulp是个不错的选择. 什么是gulp 是一个基于 Node.js 流.Javascript语法的快速构建前端项目并减少频繁的 IO 操作的自动化工具. Gulp有什么好处 易于学习使用 通过最少的API(核心.src().

gulp+webpack构建前端项目

本文将介绍如何利用gulp+webpack构建一个基本的前端项目.假设你已经安装了node环境并且会使用简单的命令行 1.gulp安装 (1)全局安装 npm install gulp -g (2)查看gulp是否安装成功 gulp -v (3)进入本地目录,新建gulpfile.js 2.安装gulp-webpack插件 基于gulp的插件非常多,建议大家查看npm官网https://www.npmjs.com (1)安装 webpack的用途主要是模块化+打包.安装敲入命令 npm inst

gulp + webpack 构建多页面前端项目

修改增加了demo地址 gulp-webpack-demo 之前在使用gulp和webpack对项目进行构建的时候遇到了一些问题,最终算是搭建了一套比较完整的解决方案,接下来这篇文章以一个实际项目为例子,讲解多页面项目中如何利用gulp和webpack进行工程化构建.本文是自己的实践经验,所以有些解决方案并不是最优的,仍在探索优化中.所以有什么错误疏漏请随时指出. 使用gulp过程中的一些问题,我已经在另外一篇文章讲到了 grunt or gulp 前言 现在为什么又整了一个webpack进来呢

前端工程的构建工具对比 Gulp vs Grunt

1. Grunt -> Gulp 早些年提到构建工具,难免会让人联想到历史比较悠久的Make,Ant,以及后来为了更方便的构建结构类似的Java项目而出现的Maven.Node催生了一批自动化工具,像Bower,Yeoman,Grunt等.而如今前端提到构建工具会自然想起Grunt.Java世界里的Maven提供了强大的包依赖管理和构建生命周期管理. 在JavaScript的世界里,Grunt.js是基于Node.js的自动化任务运行器.2013年02月18日,Grunt v0.4.0 发布.F

前端工程筹建NodeJs+gulp+bower

1.安装nodejs nodejs 官网下载安装文件 安装完成之后,在命令窗口执行,(显示nodejs版本) 和(显示npm版本)可以使用这两个命令查看是否安装成功: node -v npm -v 2.npm 简介 nodejs 安装过程中会自动安装npm,npm  是nodejs的程序包管理工具,用于从网上下载程序包并安装还可以管理工程对程序包的依赖,类似于java平台上的maven. 程序包是指实现了某些功能,并可以运行于nodejs平台,一般是开源程序,如压缩js代码程序,检查js代码正确

web 环境搭建00前端自动化构建工具(gulp)

web 环境搭建----前端自动化构建工具(gulp): 1----先下载安装node.js 2----然后在node.js命令行安装:npm install gulp -g (全局下载安装gulp插件) 3----然后进入到项目文件夹(命令cd 文件夹名),在项目文件夹中安装依赖文件:npm install gulp --save-dev (根据依赖文件下载gulp插件) 4----在项目文件夹目录下初始化:npm init (初始化文件) {初始化文件后项目中会出现packgae.json文