gulp+sass+react前端开发，环境搭建

时间：2023-03-08 19:30:18
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

相关文章