JavaScript自动化构建工具入门----grunt、gulp、webpack
蛮荒时代的程序员：
做项目的时候，会有大量的js 大量的css 需要合并压缩，大量时间需要用到合并压缩
在前端开发中会出现很多重复性无意义的劳动
自动化时代的程序员：
希望一切都可以自动完成
安装 常用插件、压缩插件、合并插件等。 用插件实现 功能无限扩展
简单介绍三种工具
grunt 是js任务管理工具（自动化构建工具） -- Grunt官网 戳这里
优势：出来早 社区成熟 插件全
缺点：配置复杂 效率低 （cpu占用率高）
-------------------------------------------------------------------------
gulp 基于流的自动化构建工具 -- Gulp官网 戳这里
优点：配置简单 效率高 流式工作（一个任务 的输出作为另一个任务的输入） 优点正好是grunt缺点
缺点：出现晚 插件少
-------------------------------------------------------------------------
webpack 模块打包机 -- webpack官网 戳这里
优点：模块化
缺点：配置复杂
安装node.js及npm
node.js 不仅是 服务器端js运行环境 还有 大工具包(npm)，前端用npm构建前端的开发环境，为了实现 自动化构建及项目管理
node.js 安装教程 戳这里 或者 移步度娘
//查看node版本 node -v //查看npm版本 npm -v
node.js 包分类:
1.全局包:全局环境下使用，可以在命令行任何目录下使用（-g） 在所有项目都用的情况下
2.本地包:本地工程使用的包 某个项目需要用
安装全局包cnpm
由于npm提供的包是在国外的服务器上，下载速度不能保证。
所以实际使用中可以使用淘宝提供的，cnpm国内镜像（10分钟更新）,下载速度快。
在网络状态不好的情况下使用cnpm
安装步骤:
//1.关闭npmssl严格认证 npmconfig set strict-ssl false //2.安装cnpm -g全局包 npm install -g cnpm --registry-https://registry.npm.taobao.org/
grunt
grunt构建大体步骤：
在你的工程中，安装grunt本地安装 > 创建各种目录 less js min buid > 配置Gruntfile.js,grunt的配置文件 > ok
实际开发中每个工程中 grunt版本不一样，想在所有目录中都能直接执行grunt命令
解决方法：
只全局注册grunt命令CLI（不安装对应的全局包，优势：在任何目录下都可以输入grunt命令，但不会有任何效果）
然后在各个工程下安装本地包
grunt构建具体步骤：
//安装全局grunt命令CLI 在任何目录下都可以使用grunt命令只不过无法执行 // npm install -g grunt-cli //创建工程目录 mkdir 目录名 //切换到当前目录 cd 目录名 //初始化工程 npm init //安装本地grunt安装包 //目的：多个版本可以在电脑上共存 npm install grunt --save-dev //创建Gruntfile.js文件，用来配置或定义任务（task）并加载Grunt插件 //下面单独说 Gruntfile.js文件 的配置 //安装各种grunt插件 --参考方官 grunt-contrib-less less编译 grunt-contrib-cssmin css压缩 grunt-contrib-uglify js压缩 grunt-contrib-concat 合并 grunt-contrib-watch 监控 //执行任务task grunt
关于Gruntfile.js文件配置：
Gruntfile.js文件配置需要和文件目录相结合，下面是个模板的文件tree ：
│ Gruntfile.js
│ package.json
│
├─node_modules
│
└─src
├─concat
├─css
│ └─min
├─js
│ └─min
└─less下面是Gruntfile.js文件配置：
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON(\'package.json\'),
less:{
development:{
files:[{
expand:true,
cwd:\'src/less\',
src:[\'*.less\'],
dest:\'src/css\',
ext:\'.css\'
}]
}
},
cssmin:{
options: {
banner: \'/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n\'
},
static_mappings:{
files:[
{
expand:true,
cwd:\'src/css\',
src:\'*.css\',
dest:\'src/css/min\',
ext:\'.min.css\'
}
]
}
},
uglify: {
options: {
banner: \'/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n\'
},
static_mappings:{
files:[
{
expand:true,
cwd:\'src/js\',
src:\'*.js\',
dest:\'src/js/min\',
ext:\'.min.js\'
}
]
}
},
concat:{
//压缩合并的 js 和css
distjs:{
src:[\'src/js/min/*.js\'],
dest:\'src/concat/all.js\'
},
distcss:{
src:[\'src/css/min/*.css\'],
dest:\'src/concat/all.css\'
}
},
watch:{
//监控文件变化并执行相应任务
files:[\'src/**/*.*\'],
tasks:[\'less\',\'cssmin\',\'uglify\',\'concat\']
}
});
// 加载包含 "less" 任务的插件,less编译成css。
grunt.loadNpmTasks(\'grunt-contrib-less\');
grunt.loadNpmTasks(\'grunt-contrib-cssmin\');
grunt.loadNpmTasks(\'grunt-contrib-uglify\');
grunt.loadNpmTasks(\'grunt-contrib-concat\');
grunt.loadNpmTasks(\'grunt-contrib-watch\');
grunt.registerTask(\'default\', [\'less\',\'cssmin\',\'uglify\',\'concat\',\'watch\']);
};gulp
//创建工程目录 mkdir 目录名 //切换到当前目录 cd 目录名 //初始化工程进行配置文件 npm init //安装gulp //注册全局 gulp npm install –g gulp //安装本地gulp npm install gulp --save-dev //创建grunt配置文件gulpfile.js 粘过去 //创建build 和 src原文件（css js less在 js 文件夹内创建min文件） //安装插件 自带watch npm install gulp-less --save-dev npm install gulp-concat --save-dev （js css都合并） npm install gulp-uglify --save-dev npm install gulp-minify-css --save-dev //执行 gulp
webpack
//全局安装webpack npm install webpack -g //在项目中安装 webpack // 初始化 package.json, 根据提示填写 package.json 的相关信息 npm init // 将 webpack 依赖添加到package.json npm install webpack --save-dev //Develop Server 工具 （可选） npm install webpack-dev-server --save-dev