Grunt

原文： https://segmentfault.com/a/1190000005029360?utm_source=tuicool&utm_medium=referral 之所以想写有关前端自动化工具的文章出于以下几个原因： 自动化构建工具对于前端开发的重要性：高效、减少重复性操作、各种强大插件的支撑。 构建工具的上手使用有一定的成本，其中也有不少坑踩，前端在掌握html/js/css三剑客的同时，还需要了解node.js、npm包管理器、构建工具的配置、语法糖以及插件的使用，也要学会当构建工具的使用日趋复杂庞大的时候如何优雅有效的组织代码，减少在使用工具的时候出现bug的概率。 工作中遇到一些grunt相关的常用实例与奇技淫巧可以拿来品玩、解读，有助于更快速上手并定制一套强大的自动化工作方式。 同类的构建工具例如gulp、webpack(严格意义上它应该是模块管理工具，但它依旧可以做一些构建的工作)，甚至是扬言可以摈弃grunt与gulp的npm scripts，它们各有各的可取之处，刷新了我对构建工具的认识。而在我看来，与其争论个孰好孰坏，还不如用上一个自己觉得顺手的、更贴合项目需求的工具库。 自动化构建工具 - Grunt 先说下在没有诞生这些工具之前写前端代码的一些痛点： “css写得好费劲啊，那些可复用的样式能不能存在一个变量或函数里直接调用啊”

1、下载并配置nodejs cd /usr/local/src/ wget https://nodejs.org/dist/v6.9.5/node-v6.9.5-linux-x64.tar.xz && xz -d node-v6.9.5-linux-x64.tar.xz tar -xvf node-v6.9.5-linux-x64.tar -C /usr/local/ ln -s /usr/local/node-v6.9.5-linux-x64/bin/node /usr/bin/node ln -s /usr/local/node-v6.9.5-linux-x64/bin/npm /usr/bin/npm node -v && npm -v 2、安装head插件 npm install -g grunt-cli ln -s /usr/local/node-v6.9.5-linux-x64/lib/node_modules/grunt-cli/bin/grunt /usr/bin/grunt 3、下载并配置head cd /var/lib/elasticsearch git clone git://github.com/mobz/elasticsearch-head.git chown -R elasticsearch:elasticsearch elasticsearch

1、概念理解【预计5分钟】： 为什么要讲下这三大工具，Grunt/Gulp/Webpack的作用又是什么？有什么好处吗？ 答：首先说下我们都了解jquery,但是我们下载的时候通常在官网会看到两种文件，如图： 这个时候有两个文件，jquery-3.0.0.js 和 jquery-3.0.0.min.js 其实这两个文件是一模一样，里面的功能和方法，主要区别是一个是258kb，另外一个是85kb，为什么功能一样但是一个是258kb，另外一个是85kb呢，请看下面两张图： 这一张是jquery-3.0.0.js 内部结构图 下面一张是jquery-3.0.0.min.js 最后看到区别了吗，min代表的是占用最小的空间，为项目提高性能上，所以我们一般的话项目上线会用到jquery-3.0.0.min.js这样的文件，但是一般开发中我们也会用到jquery-3.0.0.js 结构清晰的文件，主要是因为我们能够方便学习看jquery的代码，有助于我们开发项目，如果jquery已经很熟练了，你就可以在开发项目的时候直接用到打了包的jquery-3.0.0.min.js，因为在响应速度上会提高。 同理，前端攻城狮在自己写css、js、less等相关文件的时候，项目上线如果测试没有bug，客户比较满意，我们都会直接把前端攻城狮写的css、js等相关文件打包，这样在速度性能上就会相应的提高不少

grunt是什么？ grunt是一个基于nodejs的task runner，简单来说，就是类似于.net平台的msbuild以及java平台的maven。 grunt能做什么？ grunt可以使你的项目中重复的任务，比如压缩，语法检查，编译（比如LESS预处理，coffeescript编译），单元测试等变得更加简单。 安装 因为grunt是基于node.js的，所以我们首先要安装node.js以及node.js的包管理工具npm。 windows 平台下只要在 NODE.JS官方 下载MSI安装包，直接安装，node.js以及npm就能直接装好。 Linux平台下，因为一些发行版软件源的node.js版本想对比较低，grunt 0.4又要求node.js的版本要>=0.8.0，因此我推荐编译安装。 安装完成node.js以后，就可以开始安装npm，grunt以及grunt-cli了。 sudo apt-get -y install npm sudo npm install -g grunt sudo npm install -g grunt-cli Getting started 配置文件 grunt需要两个配置文件：Gruntfile.js以及package.json。 Gruntfile.js Gruntfile.js要放在项目的 根文件夹 下，用于配置grunt要运行的任务

1、elasticsearch-head是基于nodejs开发的，所以需要安装nodejs环境 2、下载nodejs 安装包 进入nodejs官网 右键复制下载链接 https://nodejs.org/dist/v10.13.0/node-v10.13.0-linux-x64.tar.xz root用户下进入/usr/local/src目录 cd /usr/local/src ##下载nodejs安装包 wget https://nodejs.org/dist/v10.13.0/node-v10.13.0-linux-x64.tar.xz 2、安装nodejs ##创建nodejs安装目录 mkdir /usr/local/nodejs ##解压nodejs安装包到/usr/local/nodejs目录 tar -xvf node-v10.13.0-linux-x64.tar.xz -C /usr/local/nodejs/ 3、配置nodejs环境变量 vim /etc/profile ##配置nodejs 的HOME目录 export NODEJS_HOME=/usr/local/nodejs/node-v10.13.0-linux-x64 ##加入nodejs的环境变量 export PATH=${JAVA_HOME}/bin:${NODEJS_HOME}/bin:

Centos7:安装node和npm 通过安装包安装，可以使用 先下载安装包到 /usr/local/tool/nodejs 路径下 wget https://npm.taobao.org/mirrors/node/v8.0.0/node-v8.0.0-linux-x64.tar.xz 下载完成后解压 tar -xvf node-v8.0.0-linux-x64.tar.xz 重命名为node mv node-v8.1.4-linux-x64 node 配置环境变量 vim /etc/profile 在文件的最后添加 #set for nodejs export NODE_HOME=/usr/local/tool/nodejs/node export PATH=$NODE_HOME/bin:$PATH 保存退出后执行更新命令 source /etc/profile 如果不生效，重启系统就可以 检测node和npm是否安装成功 显示版本号则安装成功 # node -v v8.0.0 # npm -v 5.0.0 注：现在 node 和 npm 还不能全局使用，需要做链接 （路径以自己实际情况为准） ln -s /usr/local/tool/nodejs/node/bin/node /usr/local/bin/node ln -s /usr/local/tool/nodejs