前端开发工程化探讨

至今依稀记得2014-2015年web前端的火爆场景,什么H5,CSS3.JQUERY等前端语言，框架被各大媒体，科技网络炒上风口浪尖，但是繁华落尽终归平静，
现如今前端可谓是包罗万象，产品形态，涉猎范围极广，为了提高前端开发效率与运行性能，前端团队的工程建设大致会经历四个阶段:

##第一阶段:库/框架选型

大型企业都会有自己的框架或者库进行自己的网站开发，但是对于大家常用的(jquery，angularJS,iconfont)估计还是依旧很受欢迎

##第二阶段：简单的构建优化

推荐使用GROUNT 与gulp.js,在这里介绍一下gulp

###Gulp——更优秀的构建工具
1、命令创建npm的配置文件
1
2
$ npm init
复制代码
2、添加一个gulp的依赖
1
2
$ npm install gulp --save-dev
复制代码
添加gulpfile.js
在项目根目录下添加一个gulpfile.js文件，这个是gulp的主文件，文件名是固定的
1
2
3
4
5
6
7
var gulp = require('gulp');
gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});
复制代码
安装所需插件将package.json配置如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
    {
      "name": "gulp_test",
      "version": "1.0.0",
      "description": "gulp test",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "wally",
      "license": "ISC",
      "devDependencies": {
        "browser-sync": "^2.18.5",
        "gulp": "^3.9.1",
        "gulp-autoprefixer": "^3.1.1",
        "gulp-concat": "^2.6.1",
        "gulp-concat-css": "^2.3.0",
        "gulp-csscomb": "^3.0.8",
        "gulp-htmlmin": "^3.0.0",
        "gulp-imagemin": "^3.1.1",
        "gulp-less": "^3.3.0",
        "gulp-uglyfly": "^1.4.2"
      },
      "dependencies": {
        "gulp-uglifycss": "^1.0.6"
      }
    }
复制代码

上述插件功能
//热更新
“browser-sync”: “^2.18.5”,
//gulp
“gulp”: “^3.9.1”,
//后处理css，根据caniuse数据及设置兼容对应浏览器
“gulp-autoprefixer”: “^3.1.1”,
//js文件合并
“gulp-concat”: “^2.6.1”,
//css文件合并
“gulp-concat-css”: “^2.3.0”,
//css文件格式化
“gulp-csscomb”: “^3.0.8”,
//html压缩
“gulp-htmlmin”: “^3.0.0”,
//图片压缩
“gulp-imagemin”: “^3.1.1”,
//编译less
“gulp-less”: “^3.3.0”,
//压缩、混淆js
“gulp-uglyfly”: “^1.4.2”
//压缩css
“gulp-uglifycss”: “^1.0.6”

运行命令，安装插件

$npm install (普通安装)
$cnpm install (淘宝镜像安装，建议使用)
>5、配置gulpfile.js
```bash
    var gulp = require('gulp');
    var less = require('gulp-less');
    var csscomb = require('gulp-csscomb');
    var autoprefixer = require('gulp-autoprefixer');
    var uglifycss = require('gulp-uglifycss');
    var concat = require('gulp-concat');
    var uglyfly = require('gulp-uglyfly');
    var htmlmin = require('gulp-htmlmin');
    var browserSync = require('browser-sync').create();
    var imagemin = require('gulp-imagemin');
    //var concatCss = require('gulp-concat-css');
    //1. less 编译  格式化 兼容  压缩
    gulp.task('style',function () {
        return gulp.src(['src/css/*.less','!src/css/_*.less'])
        .pipe(less())
        .pipe(autoprefixer({
          browsers: ['Android 2.3',
          'Android >= 4',
          'Chrome >= 20',
          'Firefox >= 24', // Firefox 24 is the latest ESR
          'Explorer >= 8',
          'iOS >= 6',
          'Opera >= 12',
          'Safari >= 6'],
                cascade: false
          
        }))
        .pipe(csscomb())
        .pipe(uglifycss())
        //.pipe(concatCss('style.css'))
        .pipe(gulp.dest('dest/css'))
    });
    //2.JS 合并   压缩   混淆
    gulp.task('script',function () {  
        gulp.src('src/js/*.js')
        .pipe(concat('main.js'))
        .pipe(uglyfly())
        .pipe(gulp.dest('dest/js'))
    })
    //3.图片复制
    gulp.task('image',function () {  
        gulp.src('src/img/*.*')
        .pipe(imagemin())
        .pipe(gulp.dest('dest/img'))
})
    //4.html压缩
    gulp.task('html', function() {
      gulp.src('src/*.html')
        .pipe(htmlmin({
          collapseWhitespace: true,
          removeComments: true
        }))
        .pipe(gulp.dest('dest'))
    });
    //5.浏览器
    var reload = browserSync.reload;
    gulp.task('server', function() {
        browserSync.init({
            server: {
                baseDir: "./dest/"
            }
        });
        gulp.watch("src/*.html",['html']).on("change", reload);
        gulp.watch("src/js/*.js",['script']).on("change", reload);
        gulp.watch("src/css/*.less",['style']).on("change", reload);
        gulp.watch("src/img/*.*",['image']).on("change", reload);
    });
复制代码

6、运行
1
$gulp server

npm init生成package.json,是npm安装包信息文件，”dependdencies”:{}里边存放已经安装的包列表
npm安装文件的两种方式:
+$npm install–save
代表包名，加上–save以后安装的包名以及版本号就会出现在package.json中的”dependenceies”:{}列表中
+先在package.json中的”dependencies”: {}添加要安装包的列表信息
然后运行
$ npm install
会自动将”dependencies”: {}列表中的包文件安装到本地

创建属于自己的博客

安装 hexo

必须先安装node

打开git-bush,进入到一个合适的存放hexo的文件目录，直接运行
http://www.xp510.com/xiazai/Application/other/28541.html
使用npm先安装node
npm install -g hexo-cli

注意安装时的错误提示

搭建博客

1	安装完hexo之后，运行下面的三条命令，hexo init blog -> cd blog -> npm install

是你自己的文件夹名，比如博客的文件夹名称是blog

hexo init

cd blog

npm install(自动安装所需要的全部插件)

hexo s
1
建立起本地的服务器，默认端口4000，打开浏览器，网址http://localhost:4000就可访问自己的博客

切换主题

hexo 官方提供了大量的优秀主题，我现在使用的是next主题，官网(http://theme-next.iissnan.com/ Next )

主题代码拷贝
主题的拷贝也是直接使用 git 即可，首先进入到你博客的根目录blog，再打开 git-bash 运行
1
git clone https://github.com/iissnan/hexo-theme-next themes/next

启用主题

在博客根目录下找到 _config.yml 文件，找到里面的 theme，改为next

发布博客到coding

配置 hexo deploy
hexo 提供了一个部署命令 hexo deploy，首先需要安装一下 hexo-deployer-git插件
1
npm install hexo-deployer-git --save

记得配置config.yml

配置信息

# Site
title: Shally
subtitle: 码农的日常
description: start from zero
author: yangfang: zh-CN
timezone: Asia/Shanxi

配置统一资源定位符(个人域名)

url:http://inderstack.com
对于root（根目录）、permalink（永久链接）、permalink_default(默认永久链接)等其他信息保持默认

配置部署
1
2
3
4
deploy:
  type: git
  repo: https://github.com/bai1994/bai1994.github.io.git
  branch: master

bai1994这是我的域名，这里请填写自己的域名（域名自己定义，要求简短有意义，符合标准的驼峰命名）

工程化构建

如何创建自己的博客

创建属于自己的博客

安装 hexo

搭建博客

切换主题

主题代码拷贝

启用主题

发布博客到coding

配置统一资源定位符(个人域名)

配置部署

Hello World

Quick Start

Create a new post

Run server

Generate static files

Deploy to remote sites