标签：htm nodejs 重新编译 性能 main var image ons 浏览器缓存
现在的前端开发已经不再仅仅只是静态网页的开发了，日新月异的前端技术已经让前端代码的逻辑和交互效果越来越复杂，更加的不易于管理，模块化开发和预处理框架把项目分成若干个小模块，增加了最后发布的困难，没有一个统一的标准，让前端的项目结构千奇百怪。前端自动化构建在整个项目开发中越来越重要。
我们首先来回想一下之前我们是如何来开始做一个项目的。
① 首先要确定这个项目要使用什么样的技术来实现，然后开始规划我们的项目目录，接着就要往项目增加第三方库依赖，比如：
拷贝 CSS库（Yui Reset | bootstrap）JS库（Requiet.js | Seajs | jQuery | jQuery插件 ） 进相应目录（拷贝 N个文件，花费N分钟）
② 然后，进行编码
编辑器编码 => 切换到浏览器F5 => 编辑器编码 => 切换到浏览器F5 => 编辑器编码 => 切换到浏览器F5 => 编辑器编码 => 切换到浏览器F5 …………
③ 编码完成，进行语法检查，文件合并和压缩
HTML去掉注析、换行符 - HtmlMin
CSS文件压缩合并 – CssMinify
JS代码风格检查 – JsHint
JS代码压缩 – Uglyfy
image压缩 - imagemin
整个过程都在重复无用繁琐的工具...
渐渐的，一些自动化构建工具出现了，人们开始使用例如Bower、Gulp、Grunt、node、yeoman等等工具来构建一个本地的开发环境。自动化构建已经成了前端开发的趋势，所以学好自动化构建也就是为自己的开发打下了良好的基础。
前端自动化小工具，基于任务的命令行构建工具
开始使用Grunt
通过阅读官方文档可以知道更多详细内容，下面只是总结一下，自己使用Grunt的一个实例，便于日后使用，可以按照这个套路进行~
1. 自备node环境(>0.8.0), npm包管理
2. 卸载旧版本grunt（<0.4.0） (没装过请忽略)
npm uninstall grunt -g
安装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 }
最后，执行命令
小结 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
$ npm install --save-dev gulp
gulpfile.js 的文件：var gulp = require(‘gulp‘); gulp.task(‘default‘, function() { // 将你的默认的任务代码放在这 });
$ 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
$ npm install --save-dev 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里边.通常有以下内容：
test:是对该类文件的正则表达式，用来判断采用这个loader的条件
exclude是排除的目录,比如node_modules中的文件，通常都是编译好的js，可以直接加载，因此为了优化打包速度，可以排除。作为优化手段它不是必须的
loader: 加载器的名称，每一个加载器都有属于它自己的用法，具体要参考官方说明
query: 传递给加载器的附加参数或配置信息，有些也可以通过在根目录下生成特殊的文件来单独配置，比如.babelrc
然后 建立一个 build.js 文件
var webpack = require("webpack"); var webpackConfig = require(‘./webpack.config‘) // returns a Compiler instance var compiler = webpack({ // configuration }); compiler.run(function(err, stats) { // ... }); // or compiler.watch({ // watch options: aggregateTimeout: 300, // wait so long for more changes poll: true // use polling instead of native watchers // pass a number to set the polling interval }, function(err, stats) { // ... });
命令行执行
npm run bulid.js
webpack的开发使用
npm install webpack-dev-server -g // 命令行执行 webpack-dev-server
这个配置会在Localhost:8080绑定一个express服务器，这个服务器会提供静态资源和打包文件，当打包文件重新编译的时候，它会自动个更新浏览器页面。
小结
前端工程自动化方案更新很快， 学习这些工具，是为了减轻重复劳动，提高效率。选择适合自己的方案，而不是在追寻技术的路上迷失了方向。
标签：htm nodejs 重新编译 性能 main var image ons 浏览器缓存
原文地址：http://www.cnblogs.com/kasmine/p/6436131.html
