gulp+sass+react前端开发,环境搭建
由于前端技术的发展与市场需求的提高,前端开发已经不仅仅是写几个页面那么简单。如何有效的开发、管理一个越来越庞大、越来越复杂的前端项目,成为互联网团队必须要面对的难题。
各种js库、ui库曾经火极一时。现在,前端框架与与自动化构建让前端开发走向正规化开发道路。
gulp,就像java开发中的maven,使前端项目规范化而且易于管理。
sass,使css可以向编程一样开发。
react,一套完整的前端框架,使前端开发更像是编程。
下面简单介绍下开发环境的搭建:
第一、安装nodejs
1.从nodejs官网(https://nodejs.org/en/)下载符合自己操作系统要求的版本
2.对现在的nodejs软件进行默认安装
3.检测nodejs是否安装成功
在d盘创建文件test.js,代码如下:
var http = require("http");
http.createServer(function(request, response) {
response.writeHead(200, {"Content-Type": "text/plain"});
response.write("test nodjs");
response.end();
}).listen(8899);
console.log("nodejs start listen 8899 port!");
用doc指令进入文件所在路径下,执行node test.js
第二、安装gulp
1.安装全局gulp
npm install -g gulp
2.测试gulp,执行gulp命令,不提示非内部指令。
gulp
第三、安装gulp插件
1.在D盘创建前端项目文件夹
2.用doc指令进入前端项目文件夹
3.安装前端项目依赖的gulp插件
npm install gulp -SD gulp插件列表(多个用空格分割)
如:
npm install gulp -SD gulp-ruby-sass gulp-minify-css gulp-uglify react
4.测试gulp插件
在前端项目目录下创建src/app.js(js文件内容随意)与dist;
在前端项目根目录下创建gulpfile.js文件,内容如下:
var gulp = require('gulp'),
uglify = require('gulp-uglify'); gulp.task('default', function(){
gulp.src('src/app.js')
.pipe(uglify())
.pipe(gulp.dest('dist/'));
});
doc指令进入项目根路径,执行gulp后,如果在dist创建文件app.js,而且js内容为压缩的,说明插件安装成功。
5.卸载gulp插件
npm uninstall gulp -SD gulp插件列表(多个用空格分割)
如:
npm uninstall gulp -SD gulp-ruby-sass gulp-minify-css gulp-uglify react
gulp+sass+react前端开发,环境搭建的更多相关文章
- React前端开发环境搭建
先,我们需要明确的是React和很多前端框架一样,底层都还是js以及html,即便它有着看似特殊的jsx语法. 我们要在服务端运行js,就需要依赖一个环境,和运行war包需要tomcat一类中间件一样 ...
- windows下vue+webpack前端开发环境搭建及nginx部署
一.开发环境搭建 1.前端框架一般都依赖nodejs,我们首先要安装node.js.请参考http://www.cnblogs.com/wuac/p/6381819.html. 2.由于许多npm的源 ...
- Windows 环境下vue+webpack前端开发环境搭建
一.开发环境搭建 1.前端框架一般依赖node.js,我们首先要安装node.js. 2.由于许多npm 的源都在国外的地址,安装起来特别慢,所以我们这里利用淘宝的镜像服务器. 安装命令为:npm i ...
- Sentinel控制台前端开发环境搭建
Sentinel:分布式系统的流量防卫兵. 官网:https://sentinelguard.io Github:https://github.com/alibaba/sentinel Wiki:ht ...
- Android React Native 开发环境搭建---windows下
环境搭建 环境搭建可以参考RN官网,也可以参考中文版本:http://reactnative.cn/docs/0.45/getting-started.html 如果你希望可以看到原版的安装流程,可以 ...
- react项目开发环境搭建
1.环境安装,首先要安装node http://nodejs.cn/ 进入nodejs下载,你是window就下在window的反之,安装下一步下一步...就好了 安装成功了试试 node -v , ...
- webpack前端开发环境搭建
要搭建webpack开发环境,首先要安装NodeJS,后面的过程均在NodeJS已经安装的基础上进行. 1. 首先建立一个工程目录,命名为,其目录结构如下: 其中dist目录用于存放生成的文件,src ...
- React Native开发环境搭建
安装Xcode 安装Homebrew 安装Android SDK 安装flow和watchman 安装nodejs 安装react-native-cli 安装Genymotion 安装Webstorm ...
- 前端开发环境搭建 Grunt Bower、Requirejs 、 Angular
现在web开发的趋势是前后端分离.前端采用某些js框架,后端采用某些语言提供restful API,两者以json格式进行数据交互. 如果后端采用node.js,则前后端可以使用同一种语言,共享某些可 ...
随机推荐
- Lenovo E42-80安装Linux的注意事项
Lenovo E42-80安装Linux的注意事项 https://www.cnblogs.com/dylanchu/p/9750760.html 1. 用U盘做个liveCD While makin ...
- Grep的过滤使用
grep的过滤使用 已知文件test里有以下内容 [root@yangwenbo /]# cat test yuni yunwei YUNWEI YWEI yunjijsuan yunsuan YUN ...
- linux netstat 统计连接数查看外部(转)
转自:http://boy-liguang.blog.sohu.com/187052443.html linux netstat 统计连接数查看外部 2011-10-11 08:52阅读(16333) ...
- Django之ModelForm操作
一.ModelForm的使用 顾名思义,ModelForm就是将Model与Form进行绑定,Form有自动生成表单的作用,但是每一个forms字段需要自己手动填写,而Model就是数据库表包含了所有 ...
- 1、cmd中检测远程的ip和端口是否处于监听状态
一.使用 ping 命令测试远程的ip是否可连通 cmd (右键 管理员角色) --- ping IP 二.使用 telnet 测试远程某一个ip的端口是否开放 1.为了安全起见,window ...
- kubeadm部署k8s集群
kubeadm是官方社区推出的一个用于快速部署kubernetes集群的工具. 这个工具能通过两条指令完成一个kubernetes集群的部署: # 创建一个 Master 节点 kubeadm ini ...
- vue基础四
1.绑定Html Class(在 v-bind 用于 class 和 style 时, Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组) 1.1对象语法 传给v-bin ...
- 51nod 1149 Pi的递推式(组合数学)
传送门 解题思路 首先因为\(Pi\)不是整数,所以不能直接递推.这时我们要思考这个式子的实际意义,其实\(f(i)\)就可以看做从\(i\)这个点,每次可以向右走\(Pi\)步或\(1\)步,走到[ ...
- AutoCAD二次开发-使用ObjectARX向导创建应用程序(HelloWorld例子)
AutoCAD2007+vs2005 首先自己去网上搜索下载AutoCAD2007的ARX开发包. 解压后如下 打开后如下 classmap文件夹为C++类和.net类的框架图,是一个DWG文件. d ...
- CSS:百科
ylbtech-CSS:百科 1.返回顶部 CSS (层叠样式表) 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标 ...