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


© 2015, 李德涛博客. 版权所有.

《gulp+sass+react前端开发,环境搭建》有2个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注