本篇就介绍下如何使用Grunt进行构建。 grunt安装 由于grunt依赖于nodejs，因此需要先安装nodejs。而安装grunt又需要使用npm包管理器。 ...因此可以使用node -v 和 npm -v来测试是否安装。 ? 使用npm命令安装grunt-cli,这是一款grunt的客户端程序。 ...命令如下： npm install -g grunt-cli 安装好后，进入项目目录，安装grunt： 命令如下： npm install grunt --save-dev 安装好后，就会出现如下的目录...这样就可以使用grunt了、 安装疑问 由于只能通过npm安装grunt，因此只能从镜像网站上下载。 但是当我通过代理上网时，安装npm install命令总是报错，很是无奈。
'use strict'; module.exports = function(grunt) { var fs = require('fs'); // 构建的初始化配置 grunt.initConfig...('grunt-contrib-concat'); //https://github.com/gruntjs/grunt-contrib-concat grunt.loadNpmTasks...('grunt-text-replace'); //https://www.npmjs.com/package/grunt-text-replace grunt.loadNpmTasks...('grunt-html-build'); //https://github.com/spatools/grunt-html-build // 注册刚配置好的任务 grunt.registerTask...-- grunt占位，动态生成lib.js --> <!
npm install -g grunt-cli //全局安装grunt npm init -y //初始化package.json npm install grunt --save-dev...//在项目中安装grunt grunt --help //查看更多信息 grunt 安装完毕 新建Gruntfile.js 随便举得例子1： module.exports= function...(grunt) { grunt.registerTask('a', function (name) { grunt.log.writeln('hello'+name);...--save-dev //安装合并插件 npm install grunt-contrib-uglify --save-dev //安装js压缩插件 js压缩合并 concat:{...--save-dev//安装css压缩 npm install grunt-contrib-htmlmin --save-dev//安装html压缩 htmlmin:{ options
首先安装nodejs #安装Homebrew ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)" #安装...nodejs brew install node #安装grunt-cli npm install -g grunt-cli 切换到工程目录，安装3个nodejs模块 npm install grunt...并且所有Grunt代码都必须指定在这个函数里面： module.exports = function(grunt) { // 在这里处理Grunt相关的事情 } 这个函数里面的内容一般会有一个项目配置...安装bower 1 npm install -g bower 在项目根目录下创建bower.json文件 { "name": "pingdemo", "version": "0.1.0",..."ignore": [ "**/*.txt" ], "dependencies": { "jquery": "2.1.1" }, "private": true } 安装项目依赖的外部
Grunt生态圈里面有大量的插件，Grunt工具就是使用这些插件来实现自动化。 2. 如何安装Grunt Grunt通过npm命令来安装，所以需要首先安装npm。...之后通过npm安装grunt-cli，即Grunt command line interface。...其实安装完grunt-cli后，并没有安装grunt。...使用Grunt工具前需要准备哪些东西 按理来说，使用grunt命令，只需要有个Gruntfile就可以了，但是上文提到，grunt task runner需要在每个项目中单独安装，所以还得有个保存项目元数据的...如下命令： npm install grunt --save-dev 将安装grunt task runner 并将其名称和版本号自动加入到devDependencies部分。
Grunt的三大主要组成部分： Grunt CLI Grunt Task Runner Grunt Plugins Grunt CLI 安装： npm install grunt-cli -g 上面的命令将全局安装...Grunt CLI不包括grunt task runner。 要使用 grunt task runner，我们需要将其作为应用的开发依赖安装。...我们需要将其作为应用的开发依赖安装。让我们先开一个目录，放置我们的博客应用示例。 mkdir blog cd blog 上面已经提到，Grunt要作为应用的开发依赖安装。...接着我们加载了grunt-contrib-uglify插件。在运行grunt命令之前，确保插件已经安装。所有的grunt插件都可以通过npm安装。...运行下面的命令安装grunt-contrib-uglify插件。
以下内容分别是：grunt安装和配置grunt压缩一个js的实例分析grunt 美化、压缩、合并代码文件或者代码文件夹里所有代码文件的代码实例grunt的安装与配置grunt的安装grunt 依赖Node.js...,所以请先确保安装完成Node.js.首先安装 grunt-cli工具。...npm install grunt-cli -g记住：这里是全局安装。windows系统可能需要开启管理员权限启动命令行。...注意：grunt-cli并不是grunt工具本身，只是安装了这个工具，而是用来调用和gruntfile.js同一目录的grunt。真正的grunt是安装在项目目录下面的。...然后进入你的项目目录，安装grunt（grunt工具是要安装在项目目录里面的）：npm install grunt --save-dev--save-dev就是告诉package.json，你在开发这个项目中依赖了这个插件
安装 Grunt Grunt 依赖 Node.js 所以在安装之前确保你安装了 Node.js。（可在官网上下载）然后开始安装 Grunt。...安装 Grunt-cli 需要使用 NPM，使用下面一行即可在全局范围安装 Grunt-cli ，换句话说，就是你可以在任何地方执行 grunt 命令： npm install -g grunt-cli...需要注意，因为使用 －g 命令会安装到全局，可能会涉及到系统敏感目录，如果用 Windows 的话，可能需要你用管理员权限，如果用 OS X ／ Linux 的话，你可能需要加上 sudo 命令。...下面我们就要在这个项目中安装这些插件，执行命令： npm install grunt --save-dev 表示通过 npm 安装了 grunt 到当前项目，同时加上了 —save-dev 参数，表示会把刚安装的东西添加到...下面我们来安装 Grunt 的插件，当然，不需要一个个的安装，太麻烦了，我们可以： npm install --save-dev grunt-contrib-concat grunt-contrib-jshint
/grunt-contrib-clean grunt-contrib-copy 复制文件和文件夹 https://github.com/gruntjs/grunt-contrib-copy grunt-contrib-concat.../FWeinb/grunt-svgstore grunt-csscomb （CSS）格式化 https://github.com/csscomb/grunt-csscomb grunt-contrib-less...grunt-contrib-htmlmin （HTML文件）压缩 https://github.com/gruntjs/grunt-contrib-htmlmin grunt-filerev 文件内容...hash（MD5） https://github.com/yeoman/grunt-filerev grunt-filerev-replace 替换通过grunt-filerev的文件引用 https:...require('load-grunt-tasks')(grunt); /* 统计各个任务执行时间 */ require('time-grunt')(grunt); }; 示例
因此当你使用grunt的时候，往往都是先安装grunt-cli，再安装grunt。...如果你使用的是npm install -g grunt-cli命令，那么安装地址如下： windows: C:\\Users\\neusoft\\AppData\\Roaming\\npm\\node_modules...\\grunt-cli linux: /nodejs/node_modules/grunt-cli 在这里可以直接看到编译后的代码。...parts[0].match(/([A-Za-z]:)/)) {//如果是Linux系统，则开头加上/ dir = '/' + dir;...结论 因此，如果你同时安装了本地的grunt-cli、grunt和全局的grunt-cli、grunt，就不会纳闷为什么grunt-cli执行的是全局的、而grunt执行的是当前目录下的node_modules
1、node环境安装 http://www.runoob.com/nodejs/nodejs-install-setup.html 2、grunt安装 package.json文件 http://blog.csdn.net...('grunt-contrib-less'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-copy...'); grunt.loadNpmTasks('grunt-contrib-imagemin'); grunt.loadNpmTasks('grunt-contrib-jshint');...grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks...('grunt-contrib-connect'); grunt.loadNpmTasks('grunt-contrib-htmlmin'); grunt.registerTask('
之前博客中大致描述过“前端自动化构建工具Grunt”及“grunt[mismatched:define]”等信息。...通过npm install grunt --save-dev 安装grunt依赖; C....加载Grunt插件和任务 只要在 package.json 文件中被列为dependency（依赖）的包，并通过npm install安装之后，都可以在Gruntfile中以简单命令的形式使用： //...require('load-grunt-tasks')(grunt); 4....可以通过插件“time-grunt”进行统计每个Task执行时间 require('time-grunt')(grunt);
grunt是什么 grunt是目前非常流行的前端构建工具，支持自定义插件，有丰富的插件帮助我们完成构建任务 自动化完成我们指定的任务，例如压缩、编译、单元测试、linting等 前端为什么需要构建工具...那么我们就需要生成文档，来描述各个模块和方法 这时我们就会发现，开发之外的工作繁琐了很多，不仅需要写好代码，还需要做好 合并压缩、单元测试 等一系列的工作，我们就会渴望有一个便利的构建工具来完成这些工作 grunt...能做什么 我们在grunt中定义好各个任务，让grunt来自动完成这些任务 例如： （1）合并压缩，把多个js或css文件合并、压缩 （2）对js进行语法检查 （3）js单元测试 （4）执行编译 现在很多项目使用了...SASS、LESS进行css开发，那么我们就可以定义一个任务，把SASS、LESS自动编译成正常的css文件 （5）生成项目文档 这几个例子只是grunt功能的一部分，它还可以做很多事情 现在我们就对...grunt有了一个大概的了解： grunt其实就是帮助我们简化项目的发布流程，只要定义好任务，然后执行一下grunt命令，就可以一键完成代码的编译、语法检查、单元测试、合并压缩、生成文档、打包、发布等一系列的工作
随便取一个希望的名字 将JavaScript file设置到当前nodejs安装的grunt-cli路径下grunt运行文件。如下图 ? 然后运行这个任务即可进行grunt调试。...例如grunt dev。就在这增加一个dev参数。
本文中的演示在 windows 操作系统中，Linux 或 OS X 可能有一些小区别。 一、环境准备 1. 安装 Node.js 在 Node.js 官网 选择合适的版本下载并安装。...安装 grunt-cli 根据 Grunt 官方的文档 ，打开 cmd 命令窗口，输入 npm install -g grunt-cli 进行安装。...安装完成之后，再输入 grunt -version ，如输出版本号，则证明安装成功。...安装 grunt-init 通过 npm install -g grunt-init 命令安装 grunt-init 。 2....命令安装grunt插件模版。
虽然有grunt-contrib-watch的存在，但多个人编辑同一份css/js代码时，还要操心编译这个事，实在是多余。...记一下一些要注意的点: 有时候自动编译会失败，需要标记一下: 1 2 3 4 5 6 7 /usr/local/node-v0.10.20-linux-x64/bin/grunt --force |tee...$PWD_DIR/grunt.log err_count=`grep 'Error' $PWD_DIR/*.log|wc -l` fail_count=`grep 'failed' *.log|wc...: 1 2 3 4 5 6 7 svn ci --no-auth-cache --username=xxx --password=xxx static/dist/* -m "jenkins:auto grunt
grunt与seajs grunt是前端流行的自定义任务的脚手架工具，我们可以使用grunt来为我们做一些重复度很高的事情，如压缩，合并，js语法检查等。...通过定义grunt的配置文件Gruntfile.js，配置并注册grunt的任务，最终我们可以通过命令行来执行任务。 ...grunt的相关文件 grunt相关文件包括了2个，首先是Gruntfile.js，另一个是package.json文件。...grunt。...('grunt-cmd-transport'); grunt.loadNpmTasks('grunt-cmd-concat'); grunt.loadNpmTasks('grunt-contrib-uglify
Grunt 的加入帮忙解决了以上问题，让开发人员更加专注于开发。这里有一篇「Grunt教程——安装Grunt」很好地教会我们如何搭建 Grunt 环境。..."grunt-contrib-clean": "^0.6.0", "grunt-contrib-concat": "^0.5.1", "grunt-contrib-cssmin": "^0.14.0...接下来 所以接下来我打算在 Grunt 中使用「grunt-contrib-sass」和「grunt-contrib-requirejs」，这样在 php 函数都只需要引入一个入口文件，然后 sass...要用的工具是 Grunt，使用到的插件如下： "devDependencies": { "grunt": "^0.4.5", "grunt-contrib-clean": "^1.0.0",...基于 Grunt 的前端构建 继续对 Grunt 进行探索研究，例子参考「grunt-project」。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
