浅谈前端自动化构建

前言 

  现在的前端开发已经不再仅仅只是静态网页的开发了,日新月异的前端技术已经让前端代码的逻辑和交互效果越来越复杂,更加的不易于管理,模块化开发和预处理框架把项目分成若干个小模块,增加了最后发布的困难,没有一个统一的标准,让前端的项目结构千奇百怪。前端自动化构建在整个项目开发中越来越重要。

        我们首先来回想一下之前我们是如何来开始做一个项目的。

① 首先要确定这个项目要使用什么样的技术来实现,然后开始规划我们的项目目录,接着就要往项目增加第三方库依赖,比如:

  拷贝 CSS库(Yui Reset | bootstrap)JS库(Requiet.js | Seajs | jQuery | jQuery插件 ) 进相应目录(拷贝 N个文件,花费N分钟)

② 然后,进行编码

  编辑器编码 => 切换到浏览器F5 => 编辑器编码 => 切换到浏览器F5 => 编辑器编码 => 切换到浏览器F5 => 编辑器编码 => 切换到浏览器F5 …………

③ 编码完成,进行语法检查,文件合并和压缩

  1. HTML去掉注析、换行符 - HtmlMin

  2. CSS文件压缩合并 – CssMinify

  3. JS代码风格检查 – JsHint

  4. JS代码压缩 – Uglyfy

  5. image压缩 - imagemin

整个过程都在重复无用繁琐的工具...

渐渐的,一些自动化构建工具出现了,人们开始使用例如Bower、Gulp、Grunt、node、yeoman等等工具来构建一个本地的开发环境。自动化构建已经成了前端开发的趋势,所以学好自动化构建也就是为自己的开发打下了良好的基础。

 

1.Grunt

  前端自动化小工具,基于任务的命令行构建工具 

开始使用Grunt

  通过阅读官方文档可以知道更多详细内容,下面只是总结一下,自己使用Grunt的一个实例,便于日后使用,可以按照这个套路进行~

安装 grunt-cli

  1. 1. 自备node环境(>0.8.0), npm包管理

  2. 2. 卸载旧版本grunt(<0.4.0) (没装过请忽略)

    npm uninstall grunt -g
  3. 安装grunt-cli

    npm install grunt-cli -g

 开始使用Grunt构建项目

   一般需要在你的项目中添加两份文件:package.json 和 Gruntfile

     然后,写好下面的gruntfile.js文件的格式

module.exports = function(grunt) {
  // 项目配置.
  grunt.initConfig({
    // 定义Grunt任务
  });
 // 加载能够提供"uglify"任务的插件。   grunt.loadNpmTasks('grunt插件');
  // Default task(s).   grunt.registerTask('default', ['任务名']); }

 下面是我的一个 gruntfile.js文件

 1 module.exports = function (grunt) {
 2   grunt.initConfig({
 3     watch: {
 4       ejs: {
 5         files: ['views/**'],
 6         options: {
 7           livereload: true,
 8         },
 9       },
10       js: {
11         files: ['public/js/**', 'models/**/*.js', 'schemas/**/*.js'],
12         options: {
13           livereload: true, //文件更新时重新启动服务
14         },
15       },
16     },
17     nodemon: {
18       dev: {
19         file: './bin/www' //根据自己的实际修改
20       }
21     },
22     concurrent: { // 同时执行nodemon和watch任务
23       target: {
24         tasks: ['nodemon', 'watch'],
25         options: {
26           logConcurrentOutput: true
27         }
28       }
29     }
30   });
31 
32   // 加载包含 “watch","concurrent","nodemon"任务的插件
33   grunt.loadNpmTasks('grunt-contrib-watch')
34   grunt.loadNpmTasks('grunt-concurrent')
35   grunt.loadNpmTasks('grunt-nodemon');
36 
37   grunt.option('force', true)
38  // 默认执行的任务列表
39   grunt.registerTask('default', ['concurrent'])
40 }

最后,执行命令

  1. 将命令行的当前目录转到项目的根目录下。
  2. 执行 npm install 命令安装项目依赖的库。
  3. 执行   grunt  命令。

小结 Grunt的基本使用也就如上所示,比较简单,更多可以参考Grunt的插件库,比如 contrib-jshint js代码检查等插件的使用

 

2 . Gulp 

   gulp是基于Nodejs的自动任务运行器,它能自动化地完成javascript/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。

  使用Gulp的优势就是利用流的方式进行文件的处理,使用管道(pipe)思想,前一级的输出,直接变成后一级的输入,通过管道将多个任务和操作连接起来,因此只有一次I/O的过程,流程更清晰,更纯粹。Gulp去除了中间文件,只将最后的输出写入磁盘,整个过程因此变得更快。

使用Gulp,可以避免浏览器缓存机制,性能优化(文件合并,减少http请求;文件压缩)以及效率提升(自动添加CSS3前缀;代码分析检查)

gulp的安装及基本使用

    1. 全局安装 gulp:

$ npm install --global gulp

    2. 作为项目的开发依赖(devDependencies)安装:

$ npm install --save-dev gulp

    3. 在项目根目录下创建一个名为 gulpfile.js 的文件:

var gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

    4. 运行 gulp:

$ gulp

默认的名为 default 的任务(task)将会被运行,在这里,这个任务并未做任何事情。

 gulp的插件使用

  同Grunt一般,gulp也有插件库,具体有兴趣开发gulp插件的,可以看看 http://www.gulpjs.com.cn/docs/writing-a-plugin/

下面是我的一个 gulpfile.js文件,就此进行分析

'use strict'

const gulp = require('gulp'); //将gulp插件包含进来 

//在文件改动时候运行 mocha 测试用例
const mocha = require('gulp-mocha'),
  gutil = require('gulp-util'),
  jshint = require('gulp-jshint'), //js代码校验
  uglify = require('gulp-uglify'), //压缩 js文件
  minifyCSS = require('gulp-minify-css'),//压缩css
  concat = require('gulp-concat'), //合并文件
  notify = require('gulp-notify'),
  cache = require('gulp-cache'),
  rename = require('gulp-rename'), //重命名文件 
  livereload = require('gulp-livereload'),
  imagemin = require('gulp-imagemin');//优化图片;


const srcPath = {
  script: './src/scripts/',
  style: './src/styles/',
  tempalte: './src/tempaltes/'
};

const destPath = {
  style: './dist/styles/',
  script: './dist/scripts/',
  base: './dist/'
};

// ==========================
// 获取目录src/test/../的js文件进行代码检验,然后和main.js合并,进行压缩,最后复制到dist/scripts目录下。
// ==========================
function packjs() {
  return gulp.src(srcPath.script)
    .pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(gulp.dest('dist/scripts'))
    .pipe(rename({
      suffix: '.min'
    }))
    .pipe(uglify())) //仅在生产环境时候进行压缩
    .pipe(gulp.dest(destPath.script))
    .pipe(notify({
      message: 'Scripts task complete'
    }));
}


gulp.task('js', () => packjs());

 

命令行执行

$ gulp js

更多内容 查看 gulp 官方文档api 

 

3 . webpack 

  Webpack是一个模块打包的工具,它的作用是把互相依赖的模块处理成静态资源。

webpack 的安装及基本使用

    1. 全局安装 webpack :

$ npm install webpack -g

    2. 作为项目的开发依赖(devDependencies)安装:

$ npm install --save-dev webpack 

    3. 创建一个名为 webpack.config.js 的配置文件:

module.exports = {
   // 入口文件
        entry : "./entry.js",
        // 打包输出文件
        output : {
            path : __dirname,
            filename : "bundle.js"
        }
};

命令行执行 如下命令,即可将 ./main.js 作为入口打包 bundle.js:

$ webpack

webpack的进阶使用 之 加载器

module.exports = {
     // 入口文件
        entry : "./entry.js",
        // 打包输出文件
        output : {
            path : __dirname,
            filename : "bundle.js"
        },
        module : {
            loaders :[
                {test : /\.css$/,loader:"style!css"},
{test:
/\.js$/,loader: 'babel',
                    include: [path.join(projectRoot,
'src')],                     exclude: /node_modules/}] } };

这个例子使用 加载器 ,何谓加载器?加载器是对你的应用的源文件进行转换的工具。

不同类型的文件有不同的加载器,比如jsx,es6要用到babel-loader,

加载css要用到css-loader,加载html要用到html-loader,以及 vue-loader,css-loader 等等. 

所有的loader都放在module下面的loaders里边.通常有以下内容:

  1. test:是对该类文件的正则表达式,用来判断采用这个loader的条件 

  2. exclude是排除的目录,比如node_modules中的文件,通常都是编译好的js,可以直接加载,因此为了优化打包速度,可以排除。作为优化手段它不是必须的 

  3. loader: 加载器的名称,每一个加载器都有属于它自己的用法,具体要参考官方说明

  4. query: 传递给加载器的附加参数或配置信息,有些也可以通过在根目录下生成特殊的文件来单独配置,比如.babelrc 

  以上只是稍微讲了webpack的基础使用,更多使用方法 可以查看官方文档

小结

  前端工程自动化方案更新很快, 学习这些工具,是为了减轻重复劳动,提高效率。选择适合自己的方案,而不是在追寻技术的路上迷失了方向。

 

posted @ 2017-02-23 23:35 Kasmine 阅读(...) 评论(...) 编辑 收藏