前端开发环境搭建及上传至github

前端开发环境搭建及上传至github

首先需要安装好node.js(自带npm或自己安装cnpm)和git

一、部署配置好gulp——自动化项目的构建利器

1.在对应项目根目录下安装gulp（全局安装gulp之后）,安装后根目录则会出现node_modules文件夹

 $ npm install --save-dev gulp

2.下载好所需要的gulp插件

npm install gulp-load-plugins gulp-uglify gulp-minify-css gulp-minify-html gulp-imagemin gulp-concat clean open

//注解：
gulp-load-plugins   //自动帮你加载package.json文件里的gulp插件
gulp-uglify         //js压缩
gulp-minify-css     //css压缩
gulp-minify-html    //html压缩
gulp-imagemin       //图片压缩
gulp-concat         //文件合并，如可以合并css
clean               //清空文件夹
open                //打开网页

3.在根目录下创建gulpfile.js文件后初始化npm，创建package.json文件

npm init

4.在gulpfile.js中添加任务，配置好gulp命令，整个配置的代码如下：

var gulp = require('gulp');             //引入gulp
var $ = require('gulp-load-plugins')();    //引入所有的包，注意该函数必须执行一遍
var open = require('open');//不包括在所有的包内，要单独引进

//压缩html
gulp.task("html",function () {
    gulp.src("src/*.html") //读取文件
        .pipe(gulp.dest("build/")) //复制到开发环境
        .pipe($.minifyHtml()) //压缩html
        .pipe(gulp.dest("dev/")) //放到压缩文件夹
        .pipe($.connect.reload()); //重新载入
});

//压缩js
gulp.task("js",function () {
    gulp.src("src/js/*.js") //读取文件
        // .pipe($.concat("index.js")) //合并js
        .pipe(gulp.dest("build/js/")) //复制到开发环境
        .pipe($.uglify())  //压缩js
        .pipe(gulp.dest("dev/js/")) //放到压缩文件夹
        .pipe($.connect.reload());
});


//压缩css
gulp.task("css",function () {
    gulp.src("src/css/*.css") //读取文件
        .pipe(gulp.dest("build/css")) //复制到开发环境
        .pipe($.cssmin())  //压缩css
        .pipe(gulp.dest("dev/css")) //放到压缩文件夹
        .pipe($.connect.reload());
});

//压缩图片
gulp.task("img",function () {
    gulp.src("src/images/*") //读取文件 所有的图片
        .pipe(gulp.dest("build/images")) //复制到开发环境
        .pipe($.imagemin())    //压缩图片
        .pipe(gulp.dest("dev/images")) //放到压缩文件夹
        .pipe($.connect.reload());
});

//建立lib文件--插件
gulp.task("lib",function () {
    gulp.src("bower_components/**/dist/*.js")
        .pipe(gulp.dest("build/lib/"))
        .pipe(gulp.dest("dev/lib/"));
});
//音乐
gulp.task("miusic",function () {
    gulp.src("src/*.mp3")
        .pipe(gulp.dest("build/"))
        .pipe(gulp.dest("dev/"));
});
//总任务
gulp.task("build",["html","css","js","img","lib","miusic"]);

//清除所有自动创建的目录
gulp.task("clear",function () {
    gulp.src(["dev/","build/"])
        .pipe($.clean());
});

//监控刷新
gulp.task("server",function () {
    $.connect.server({
        root:"build/",
        port:8080,
        livereload:true
    })

    open("http://localhost:8080");

    gulp.watch("src/*.html",["html"]); //参数：监控对象 执行对象
    gulp.watch("src/css/*.css",["css"]);
    gulp.watch("src/js/*.js",["js"]);
    gulp.watch("src/images/*",["img"]);
});

//默认任务——使用gulp命令行即可
gulp.task("default",["server"]);

二、安装配置好bower——客户端技术的软件包管理器
1.下载安装jquery、store包（本地存储），（全局安装bower之后）,安装后根目录则会出现bower_components文件夹

bower install jquery
bower install store

2.初始化，创建bower.json 文件

bower init

3.在项目中“src”文件夹下创建“lib”文件夹，并在html中引入jquer和store

<script src="lib/jquery/dist/jquery.js"></script>
<script src="lib/store2/dist/store2.js"></script>

三、上传至github
1.打开git bash，初始化仓库，自动创建一个git目录，如果不显示要在文件中，给显示隐藏文件打勾

git init

2.添加项目文件
（注：如有不需要上传的文件夹，输入touch .gitignore,在文件夹就会生成了一个“.gitignore”文件然后在”.gitignore” 文件里输入你要忽略的文件夹及其文件即可）

git add ./

3.查看添加的状态，是否添加成功

git status

4.提交

git commit -m "提交日志（如第几次提交）"

5.首次提交要有对应github仓库的地址

git remote add origin https://...

6.压入仓库，提交成功

git push -u origin master

如需免密push，可在.git/config中设置：
url = https://用户账号:密码@github.com/….