标签:desc asc temporary pre 不同的 删除 tps pac 设置
一个模块打包器,将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。
本身只能打包js模块,自带BGM如虎添翼(Loader转换器)【将各种类型的资源转换成js模块】
安装
$ npm intsall webpack -g
在项目文件中安装webpack依赖
#进入安装目录 #确定已经有package.json,没有的话就通过npm init 创建 #安装webpack依赖 $npm install webpack --save-dev
查看版本信息
#查看安装的版本信息 $npm info webpack #安装稳定版本 $npm install webpack@1.12.0 --save-dev
新建文件并使用
打包
$ webpack entry.js bundle.js
webpack会分析每个入口文件,解析包依赖关系的各个文件,每个模块都打包到bundle.js。webpack给每个模块分配一个唯一的ID并通过这个ID索引和访问模块。页面运行时,先启动entry.js,其他模块会在运行require时候执行。
Bowser:给模块的安装、升级、删除提供一个统一的、可维护的管理模式
Browserify:让服务器端CommonJS 运行在浏览器端
Component:将网页所需要的所有资源(脚本、图片、样式表)编译后放在同一个目录下
Duo:站在巨人的肩膀上(拜师于Component,集Bowser和Browserify大成者),傲视群雄
一种任务管理器(自动化任务处理工具),基于nodejs,可实现跨系统跨平台的桌面端操作。
安装:
npm install -g grunt-cli
package.json-----定义了项目中的数据,比如项目名,项目的依赖关系。
{ "name": "project-nam", "version": "0.4.5", "description": "学习 grunt", "author": "Xingwucheng", "devDependencies": { "temporary": "~0.0.4", "grunt-contrib-jshint": "~0.6.4", "grunt-contrib-nodeunit": "~0.2.0", "grunt-contrib-watch": "~0.5.3", "difflet": "~0.2.3", "senver": "~2.1.0", } }
Gruntfile.js -------定义和配置在Grunt中运行的任务
module.exports = function(grunt) { //项目配置 grunt.initConfig({ pkg: grunt.file.readJSON(‘package.json‘), uglify: { options: { banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n‘ }, build: { src: ‘src/<%= pkg.name %>.js‘, dest: ‘build/<%= pkg.name %>.min.js‘ } } }); //加载grunt插件 grunt.loadNpmTasks(‘grunt-contrib-uglify‘); // 注册grunt默认任务. grunt.registerTask(‘default‘, [‘uglify‘]); };
标签:desc asc temporary pre 不同的 删除 tps pac 设置
原文地址:http://www.cnblogs.com/xingwucheng/p/7469347.html