攻城狮-web

工程化构建

发表于 | 分类于 |

前端开发工程化探讨

至今依稀记得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
复制代码

  1. 添加gulpfile.js
    在项目根目录下添加一个gulpfile.js文件，这个是gulp的主文件，文件名是固定的

    1
    2
    3
    4
    5
    6
    7
    var gulp = require('gulp');
    gulp.task('default', function() {
      // 将你的默认的任务代码放在这
    });
    复制代码

  2. 安装所需插件将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”

运行命令，安装插件

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
$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”: {}列表中的包文件安装到本地