Grunt - 前端开发所见即所得
2024-10-19 03:23:41
首先要安装全局的grunt-cli
sudo npm install grunt-cli -g
1,项目中初始化npm文件,项目名不要和【关键词】如grunt重复,一直回车即可
npm init
2,安装grunt和connect、watch、livereload
connect插件异常
推荐到github上下载:https://github.com/gruntjs/grunt-contrib-connect
npm install grunt-contrib-connect --save-dev npm install grunt --save-dev npm install grunt-contrib-watch --save-dev npm install connect-livereload --save-dev npm install --save-dev serve-static serve-index
也可以将以下代码手动加入到package.json中去,然后在控制台输入npm install
"devDependencies": { "connect-livereload": "^0.5.4", "grunt": "^0.4.5", "grunt-contrib-connect": "^1.0.1", "grunt-contrib-watch": "^1.0.0" "serve-index": "^1.7.3", "serve-static": "^1.10.2" }
3,在当前项目根目录创建并且配置Gruntfile.js
module.exports = function(grunt) { // LiveReload的默认端口号,你也可以改成你想要的端口号 var lrPort = 35729; // 使用connect-livereload模块, var lrSnippet = require('connect-livereload')({ port: lrPort }); var serveStatic = require('serve-static'); var serveIndex = require('serve-index'); var lrMiddleware = function(connect, options, middlwares) { return [lrSnippet,serveStatic(options.base[0]),serveIndex(options.base[0])]; }; // 项目配置(任务配置) grunt.initConfig({ // 读取我们的项目配置并存储到pkg属性中 pkg: grunt.file.readJSON('package.json'), // 通过connect任务,创建一个静态服务器 connect: { options: { // 服务器端口号 port: 8000, // 服务器地址(可以使用主机名localhost,也能使用IP) hostname: 'localhost', // 物理路径(默认为. 即根目录) 注:使用'.'或'..'为路径的时,可能会返回403 Forbidden. 此时将该值改为相对路径 如:./app base: '.', open:true }, livereload: { options: { // 通过LiveReload脚本,让页面重新加载。 middleware: lrMiddleware } } }, // 通过watch任务,来监听文件是否有更改 watch: { client: { // 我们不需要配置额外的任务,watch任务已经内建LiveReload浏览器刷新的代码片段。 options: { livereload: lrPort }, // '**' 表示包含所有的子目录 // '*' 表示包含所有的文件 files: ['app/*.html', 'app/styles/*', 'app/scripts/*', 'app/images/*'] } } }); // grunt.initConfig配置完毕 // 加载插件 grunt.loadNpmTasks('grunt-contrib-connect'); grunt.loadNpmTasks('grunt-contrib-watch'); // 自定义任务 grunt.registerTask('default', ['connect', 'watch']); };
4,控制台中输入grunt即可
最新文章
- 项目游戏开发日记 No.0x000003
- SharePoint 2013 PowerShell命令备份还原报错
- 调皮的MySQL服务 请你不要再躲猫猫
- Axis2、Axis1 以及其他接口的调用方式
- shell学习目录
- 9.配置postfix空客户端
- Android 解决服务端验证码问题
- String.PadLeft - 格式对齐
- 分割视图控制器(UISplitViewController) 改_masterColumnWidth 导致在 IOS 10中出现闪退
- DOT + graphviz 轻松画图
- vi/vim经常使用命令
- vs2012 不显示最近项目
- Matplotlib中文显示的问题
- 关于String的相关常见方法
- 2016 UESTC Training for Dynamic Programming
- mac下常用命令
- [转]MySQL常用Json函数和MySQL常用字符串函数
- [计算机视觉] 图像拼接 Image Stitching
- centos 安装hue 4.0
- C#-MessageBox全部函数重载形式及举例