JavaScript自动化构建工具入门----grunt、gulp、webpack
蛮荒时代的程序员:
自动化时代的程序员:
简单介绍三种工具
安装node.js及npm
grunt、gulp、webpack这三种自动化构建工具都依赖node.js环境,所以我们需要先安装node -- node官网 戳这里
//查看node版本
node -v
//查看npm版本
npm -v
//1.关闭npmssl严格认证
npmconfig set strict-ssl false
//2.安装cnpm -g全局包
npm install -g cnpm --registry-https://registry.npm.taobao.org/
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
JavaScript自动化构建工具入门----grunt、gulp、webpack的更多相关文章
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...
- JavaScript自动化构建工具grunt、gulp、webpack介绍
前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...
- gulp前端自动化构建工具入门篇
现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gulp? 3.怎么用? 什么是gulp 答:是一个前端自动化的构建工具,直白点说,如果没有这个工具,我们利用人工依旧可以做 ...
- grunt,gulp,webpack前端打包工具的特性
1.http://www.cnblogs.com/lovesong/p/6413546.html (gulp与webpack的区别) 2.http://blog.csdn.net/qq_3231263 ...
- 亚信UED前端流程自动化构建工具
亚信UED前端流程自动化构建工具 .wmd-input, .wmd-input:focus, #md-section-helper {font-size: 14px !important;line-h ...
- 前端自动化构建工具--Gulp&&Webpack
前端构建工具的作用可以认为是对源项目文件或资源进行文件级处理,将文件或资源处理成需要的最佳输出结构和形式. 在处理过程中,我们可以对文件进行模块化引入.依赖分析.资源合并.压缩优化.文件嵌入.路径替换 ...
- 前端项目自动化构建工具——Webpack入门教程
参考资料:https://www.webpackjs.com/(中文文档) https://www.webpackjs.com/(官方文档) 首先有必要说明一下,本文侧重讲解webpack基本配置 ...
- gulp前端自动化构建工具新手入门篇
很久没有更新博文了. 经过了一次年前吐血的赶项目,终于在年后回血了.趁着有空,新学到了一个前端自动化构建工具-gulp. 现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gul ...
- 基于流的自动化构建工具------gulp (简单配置)
项目上线也有一阵子,回头过来看了看从最初的项目配置到开发的过程,总有些感慨,疲软期,正好花点时间,看看最初的配置情况 随着前端的发展,前端工程化慢慢成为业内的主流方式,项目开发的各种构建工具,也出现了 ...
随机推荐
- tensorflow笔记(四)之MNIST手写识别系列一
tensorflow笔记(四)之MNIST手写识别系列一 版权声明:本文为博主原创文章,转载请指明转载地址 http://www.cnblogs.com/fydeblog/p/7436310.html ...
- Zepto源码分析(二)奇淫技巧总结
Zepto源码分析(一)核心代码分析 Zepto源码分析(二)奇淫技巧总结 目录 * 前言 * 短路操作符 * 参数重载(参数个数重载) * 参数重载(参数类型重载) * CSS操作 * 获取属性值的 ...
- b64_md5加密Java、JavaScript实现
问题说明 MD5的作用是让大容量信息在用数字签名软件签署私人密钥前被"压缩"成一种保密的格式(就是把一个任意长度的字节串变换成一定长的十六进制数字串).经过md5后的字符数组中含有 ...
- Web初学-Web应用细节
一.web应用程序简介 WEB应用程序指供浏览器访问的程序,通常也简称为web应用. 一个web应用由多个静态web资源和动态web资源组成,如: html.css.js文件 Jsp文件.java程序 ...
- HTTP Components简介
基于版本4.5.x 简介 组件 HttpClient,核心组件 HC Fluent,提供了流式操作接口 HttpMime,提供文件上传时用到的一些工具类 HttpClient Cache,有待学习 H ...
- ASP.Net Core Razor 页面路由
在服务器端 Web 应用程序框架中,其中非常重要的设计是开发人员如何将URL与服务器上的资源进行匹配,以便正确的处理请求.最简单的方法是将 URL 映射到磁盘上的物理文件,在 Razor 页面框架中, ...
- 文档API生成神器SandCastle使用心得
一.功能描述 关于Sandcastle网上的参考资料相对较少,Google出来很多资料都是全英文的,相对于我这种英语渣渣看起来还是很费劲的. 言简意赅,Sandcastle主要功能是能够将C#类生成类 ...
- hdu 6194 沈阳网络赛--string string string(后缀数组)
题目链接 Problem Description Uncle Mao is a wonderful ACMER. One day he met an easy problem, but Uncle M ...
- SVN服务器搭建(一)
本教程以64位win10系统为例在本地搭建svn服务器,安装完成后,即可访问本地svn服务器上的项目,也可以访问网上其他svn服务器上的项目. 一.首先准备三个软件: 1.VisualSVN-Serv ...
- 小程序脚本语言WXS,你想要的都在这里了
WXS脚本语言是 Weixin Script脚本的简称,是JS.JSON.WXML.WXSS之后又一大小程序内部文件类型.截至到目前小程序已经提供了5种文件类型. 解构小程序的几种方式,其中一种方式就 ...