[Grunt] Development Automation Tasks with Grunt
with development grunt Tasks Automation
2023-09-14 09:00:55 时间
With Grunt you can automate core tasks for your AngularJS project. In this lesson we will take a look at converting Stylus files to CSS, and add a watch task to convert those files automatically whenever a change is detected.
We build a grunt for watch any styl file changes,
if changed, then we compile to css files, and see if the css files changed we reload the page.
Install:
npm install grunt --save-dev npm install grunt-contrib-stylus npm install grunt-contrib-watch
Example:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Grunt Stylus</title> <link rel="stylesheet" href="app/css/app.css"/> <script src="//localhost:35729/livereload.js"></script> </head> <body class="bg"> <h1>Grunt</h1> <div>Here we are now!</div> </body> </html>
GruntFile:
/** * Created by Answer1215 on 11/16/2014. */ module.exports = function(grunt) { grunt.initConfig({ stylus:{ compile:{ options: { compress: false }, files: { "app/css/app.css": "styl/app.styl" } } }, watch:{ stylus:{ files: ['styl/**/*.styl'], tasks: ['stylus:compile'] }, css:{ options: {livereload: true}, files: ['app/css/**.css'] }, html:{ options: {livereload: true}, files: ['**.html'] }, script: { options: {livereload: true}, files: ['app/js/**.js'] } } }); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-stylus'); }
Read More:
https://github.com/gruntjs/grunt-contrib-stylus
https://github.com/gruntjs/grunt-contrib-watch#optionslivereload
相关文章
- iOS__上传应用到AppStore出现Authenticating with the iTunes store
- ORA-24062: Subscriber table string inconsistent with queue table string ORACLE 报错 故障修复 远程处理
- ORA-25213: message with specified RELATIVE_MSGID has been dequeued ORACLE 报错 故障修复 远程处理
- ORA-26786: A row with key string exists but has conflicting column(s) string in table string ORACLE 报错 故障修复 远程处理
- ORA-32303: mviews with user-defined types cannot reference multiple master sites ORACLE 报错 故障修复 远程处理
- ORA-32304: materialized views with user-defined types cannot use prebuilt table ORACLE 报错 故障修复 远程处理
- MySQL Error number: 4070; Symbol: ER_CHANGE_REP_SOURCE_GR_CHANNEL_WITH_GTID_MODE_NOT_ON; SQLSTATE: HY000 报错 故障修复 远程处理
- ORA-15155: version incompatible with the cluster ORACLE 报错 故障修复 远程处理
- ORA-16019: cannot use string with LOG_ARCHIVE_DEST or LOG_ARCHIVE_DUPLEX_DEST ORACLE 报错 故障修复 远程处理
- Scala Macros - 元编程 Metaprogramming with Def Macros详解编程语言
- java.security.cert.CertPathValidatorException: Path does not chain with any of the trust anchors详解编程语言
- How to Build Your Own HTPC with Linux Operating System(linuxhtpc)
- Maximizing Web Development Efficiency with PHPnow Linux(phpnowlinux)
- Streamlining Web Development with Linux LNMP An Essential Guide for Entrepreneurs and Developers(linuxlnmp)
- Debugging PHP with Xdebug on Linux System(xdebug linux)
- 语句Oracle中简洁的With语句(oracle 中with)
- 分析学习Oracle深入理解使用With 分析(oracle使用with)
- 从Oracle中挖掘洞见坚实的With表(oracle with表)