笔记:grunt的构建以及js文件的合成&压缩
来源:互联网 发布:全国高校校花知乎 编辑:程序博客网 时间:2024/06/05 10:34
今天我们就来一起学习如何安装grunt,以及最基础的配置。
基于对gulp的初步了解,我们类比着学习grunt的构建。
同样的,我们来总结以下要点:
1.node.js 的安装;
2.全局安装 grunt;
3跳转至你想存放grunt插件内容的文件夹;
4.创建package.json文件(重要);
5.安装需要的对应模块;
6.创建Gruntfile.js文件(重要);
7.开始使用;
================这是一条分割线=======================
1.安装node.js
去官网下载就可以了https://nodejs.org/en/ (点击跳转);
安装号之后我们来检查一下是否安装成功,我们打开cmd。
我们输入node -v 查看node版本号;再输入npm -v 查看npm版本号。
如果两个都存在就表示安装成功了。
因为所有的构建都是基于node.js的基础。
这里有一个小技巧,就是安装cnpm,这样就可以实现在国内cnpm中下载国外npm里的所有东西。
想安装的请跳转:http://blog.csdn.net/qq_38712750/article/details/71750734 (点击打开链接)
确认都安装好后进入下一步。
2.安装grunt(全局安装)
安装grunt一共需要两次,这次为第一次。
我们安装的其实并不是grunt 而是grunt-cli,因此我们 输入:
cnpm install grunt-cli -g
让后同样的检查版本号的方式检查是否安装好
完成到这里我们就要开始进入最重要的环节。
3.跳转至你想要存放功能文件的文件夹。
4.创建package.json文件
这里我们用命令的方式生成。
输入:
cnpm init
确认信息后输入y
这时我们就去所在的文件目录中确认pacaage.josn 是否生成成功。
确认好之后进入下一步
5.再次下载grunt注意这次不是全局安装;
输入指令(在存放文件目录中)
cnpm install grunt --save-dev
之后我们就可以开始下载我们想要的功能模块了。
cnpm install grunt-contrib-concat --save-dev//合并文件cnpm install grunt-contrib-uglify --save-dev//压缩文件
module.exports = function (grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { js_concat: { files: { 'dist/js/concat/concat.js': ['dist/js/*.js'] } } }, uglify: { js_min: { files: { 'dist/js/minfilde/concat.min.js': ['dist/js/concat/concat.js'] } } } }); grunt.loadNpmTasks('grunt-contrib-concat');//合并 grunt.loadNpmTasks('grunt-contrib-uglify');//压缩 grunt.registerTask('js_c_m', ['concat', 'uglify']);};
注意的是file中的文件名字以及地址是可以更换的,不一定用我里面写的那一套。
这样我们就算成功安装了一系列方便的功能。
开始使用你之前安装的功能。
- 笔记:grunt的构建以及js文件的合成&压缩
- grunt uglify的 多js文件的压缩
- grunt压缩、合并css、js文件的配置信息
- grunt构建&文件合并&压缩
- grunt构建&文件合并&压缩
- grunt构建&文件合并&压缩详细教程
- grunt构建&文件合并与压缩
- 基于node.js的构建工具grunt.js
- 基于Node.js的自动化构建工具Grunt.js
- js、css文件压缩例子-grunt
- Grunt实现css,js,images文件压缩
- Grunt 进行js,css文件合并,压缩
- grunt合并压缩js、css文件
- grunt合并压缩js,css文件
- Grunt压缩、合并js/css文件
- Windows 下使用Grunt 压缩 js文件
- grunt压缩js和css文件(1)
- grunt压缩js多个任务的样板
- D-04
- (个人)AR电子书系统创新实训第一周(1)
- 10个非常有用的Javascript技巧。必看!
- Linux学习基础篇(一)
- 十年程序员的感悟
- 笔记:grunt的构建以及js文件的合成&压缩
- Vue初体验(三),表达式的使用{{}}
- 动态规划 hard LeetCode 354. Russian Doll Envelopes
- 1107. Social Clusters (30)
- JS的使用方式-内部js
- 【windows勒索病毒相关-EternalBlue】Windows系统SMB/RDP远程命令执行漏洞修复方案
- 第一次写自定义标签
- 我所理解的多线程之Lock
- Basemap导入shapefile出现utf-8编码问题