JavaScript自动化构建工具入门----grunt、gulp、webpack

蛮荒时代的程序员:

做项目的时候,会有大量的js 大量的css   需要合并压缩,大量时间需要用到合并压缩
在前端开发中会出现很多重复性无意义的劳动 

自动化时代的程序员:

希望一切都可以自动完成 
安装 常用插件、压缩插件、合并插件等。  用插件实现 功能无限扩展  

  • 简单介绍三种工具

grunt 是js任务管理工具(自动化构建工具)    -- Grunt官网 戳这里
优势:出来早 社区成熟  插件全  
缺点:配置复杂   效率低 (cpu占用率高) 
-------------------------------------------------------------------------
gulp 基于流的自动化构建工具     -- Gulp官网 戳这里
优点:配置简单 效率高 流式工作(一个任务 的输出作为另一个任务的输入)  优点正好是grunt缺点
缺点:出现晚  插件少
-------------------------------------------------------------------------
webpack 模块打包机    -- webpack官网 戳这里
优点:模块化 
缺点:配置复杂
  • 安装node.js及npm

grunt、gulp、webpack这三种自动化构建工具都依赖node.js环境,所以我们需要先安装node  -- node官网 戳这里

              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
上一篇:js中 null, undefined, 0,空字符串,false,不全等比较


下一篇:Struts2 源码分析——Hello world