由于前端技术的发展与市场需求的提高,前端开发已经不仅仅是写几个页面那么简单。如何有效的开发、管理一个越来越庞大、越来越复杂的前端项目,成为互联网团队必须要面对的难题。

各种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前端开发,环境搭建的更多相关文章

  1. React前端开发环境搭建

    先,我们需要明确的是React和很多前端框架一样,底层都还是js以及html,即便它有着看似特殊的jsx语法. 我们要在服务端运行js,就需要依赖一个环境,和运行war包需要tomcat一类中间件一样 ...

  2. windows下vue+webpack前端开发环境搭建及nginx部署

    一.开发环境搭建 1.前端框架一般都依赖nodejs,我们首先要安装node.js.请参考http://www.cnblogs.com/wuac/p/6381819.html. 2.由于许多npm的源 ...

  3. Windows 环境下vue+webpack前端开发环境搭建

    一.开发环境搭建 1.前端框架一般依赖node.js,我们首先要安装node.js. 2.由于许多npm 的源都在国外的地址,安装起来特别慢,所以我们这里利用淘宝的镜像服务器. 安装命令为:npm i ...

  4. Sentinel控制台前端开发环境搭建

    Sentinel:分布式系统的流量防卫兵. 官网:https://sentinelguard.io Github:https://github.com/alibaba/sentinel Wiki:ht ...

  5. Android React Native 开发环境搭建---windows下

    环境搭建 环境搭建可以参考RN官网,也可以参考中文版本:http://reactnative.cn/docs/0.45/getting-started.html 如果你希望可以看到原版的安装流程,可以 ...

  6. react项目开发环境搭建

    1.环境安装,首先要安装node http://nodejs.cn/  进入nodejs下载,你是window就下在window的反之,安装下一步下一步...就好了 安装成功了试试 node -v , ...

  7. webpack前端开发环境搭建

    要搭建webpack开发环境,首先要安装NodeJS,后面的过程均在NodeJS已经安装的基础上进行. 1. 首先建立一个工程目录,命名为,其目录结构如下: 其中dist目录用于存放生成的文件,src ...

  8. React Native开发环境搭建

    安装Xcode 安装Homebrew 安装Android SDK 安装flow和watchman 安装nodejs 安装react-native-cli 安装Genymotion 安装Webstorm ...

  9. 前端开发环境搭建 Grunt Bower、Requirejs 、 Angular

    现在web开发的趋势是前后端分离.前端采用某些js框架,后端采用某些语言提供restful API,两者以json格式进行数据交互. 如果后端采用node.js,则前后端可以使用同一种语言,共享某些可 ...

随机推荐

  1. Lenovo E42-80安装Linux的注意事项

    Lenovo E42-80安装Linux的注意事项 https://www.cnblogs.com/dylanchu/p/9750760.html 1. 用U盘做个liveCD While makin ...

  2. Grep的过滤使用

    grep的过滤使用 已知文件test里有以下内容 [root@yangwenbo /]# cat test yuni yunwei YUNWEI YWEI yunjijsuan yunsuan YUN ...

  3. linux netstat 统计连接数查看外部(转)

    转自:http://boy-liguang.blog.sohu.com/187052443.html linux netstat 统计连接数查看外部 2011-10-11 08:52阅读(16333) ...

  4. Django之ModelForm操作

    一.ModelForm的使用 顾名思义,ModelForm就是将Model与Form进行绑定,Form有自动生成表单的作用,但是每一个forms字段需要自己手动填写,而Model就是数据库表包含了所有 ...

  5. 1、cmd中检测远程的ip和端口是否处于监听状态

    一.使用 ping 命令测试远程的ip是否可连通 cmd  (右键 管理员角色) ---  ping   IP 二.使用 telnet 测试远程某一个ip的端口是否开放 1.为了安全起见,window ...

  6. kubeadm部署k8s集群

    kubeadm是官方社区推出的一个用于快速部署kubernetes集群的工具. 这个工具能通过两条指令完成一个kubernetes集群的部署: # 创建一个 Master 节点 kubeadm ini ...

  7. vue基础四

    1.绑定Html Class(在 v-bind 用于 class 和 style 时, Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组) 1.1对象语法 传给v-bin ...

  8. 51nod 1149 Pi的递推式(组合数学)

    传送门 解题思路 首先因为\(Pi\)不是整数,所以不能直接递推.这时我们要思考这个式子的实际意义,其实\(f(i)\)就可以看做从\(i\)这个点,每次可以向右走\(Pi\)步或\(1\)步,走到[ ...

  9. AutoCAD二次开发-使用ObjectARX向导创建应用程序(HelloWorld例子)

    AutoCAD2007+vs2005 首先自己去网上搜索下载AutoCAD2007的ARX开发包. 解压后如下 打开后如下 classmap文件夹为C++类和.net类的框架图,是一个DWG文件. d ...

  10. CSS:百科

    ylbtech-CSS:百科 1.返回顶部 CSS (层叠样式表) 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标 ...