grunt和gulp都是前端自动化的工具,grunt更成熟,插件社区全、大;gulp比较年轻,性能更好,更简单容易。具体使用哪种可根据实际项目组来决定。
创建任务
grunt默认执行的是default文件

  1. module.exports = function(grunt) {
  2. grunt.registerTask('default',function(){
  3. console.log('Hello Grunt');
  4. })
  5. }

在执行他的时候,需要给参数赋值,比如在命令行输入:grunt greet:marymei

  1. module.exports = function(grunt) {
  2. grunt.registerTask('greet',function(name){
  3. console.log('Hello' +name);
  4. })
  5. }

处理错误,遇到错误warn默认就不继续执行了,但是可以在命令行设置grunt greet:n --force来强制执行
但是如果是fatal,那么即使使用了grunt greet:n --force他也是不向下执行的

  1. module.exports = function(grunt) {
  2. grunt.registerTask('greet',function(name){
  3. if(name.length < 2) {
  4. grunt.warn('名字太短了~');
  5. }
  6. grunt.log.writeln('Hello' +name);
  7. })
  8. }

链接多个任务:

  1. module.exports = function(grunt) {
  2. grunt.registerTask('greet-1',function(){
  3. grunt.log.writeln('Hello');
  4. });
  5. grunt.registerTask('greet-2',function(){
  6. grunt.log.writeln('Hola');
  7. });
  8. grunt.registerTask('greet-3',function(){
  9. grunt.log.writeln('您好');
  10. });
  11. grunt.registerTask('greentAll',['greet-1','greet-2','greet-3']);
  12. };

初始化:

  1. module.exports = function(grunt) {
  2. grunt.initConfig({
  3. greet: {
  4. english: 'Hello'
  5. }
  6. });
  7. grunt.registerTask('greet',funtion(){
  8. grunt.log.writeln(grunt.config.get('greet.english'));
  9. });
  10. };

多任务:

  1. module.exports = function(grunt) {
  2. grunt.initConfig({
  3. greet: {
  4. english: 'Hello'
  5. spanish:'Hola',
  6. chinese:'您好'
  7. }
  8. });
  9. grunt.registerMultiTask('greet',funtion(){
  10. grunt.log.writeln(this.target + ':' + this.data);
  11.  
  12. });
  13. };

文件与目录
创建目录

  1. module.exports = function(grunt) {
  2. grunt.registerTask('createFolders',function(){
  3. grunt.file.mkdir('dist/stylesheets');
  4. });
  5. };

tree -I node_modules 命令可以查看文件目录

删除目录:

  1. module.exports = function(grunt) {
  2. grunt.registerTask('createFolders',function(){
  3. grunt.file.mkdir('dist/stylesheets');
  4. });
  5. grunt.registerTask('clean',function(){
  6. grunt.file.delete('dist');
  7. });
  8. };

显示版本

  1. module.exports = function(grunt) {
  2. grunt.initConfig({
  3. pkg:grunt.file.readJSON('package.json');
  4. });
  5. grunt.registerTask('copyright',function(){
  6. var content = grunt.tamplate.process('<%= pkg.name%>这个项目是由<%= pkg.author %>创建的,现在的版本<%= pkg.version %>');
  7. grunt.file.write('copyright.txt', content);
  8. });
  9. };

复制文件:
  module.exports = function(grunt){ grunt.loadNpmTasks('grunt-contrib-copy'); }

配置要复制的文件:

  1. module.exports = function(grunt){
  2. //加载复制文件的插件
  3. grunt.loadNpmTasks('grunt-contrib-copy');
  4. grunt.initConfig({
  5. copy: {
  6. html: {
  7. src: 'index.html',
  8. dest: 'dist/'
  9. },
  10. style: {
  11. src: 'stylesheets/*.css',
  12. dest: 'dist/'
  13. },
  14. js: {
  15. src:'javascript/**/*.js'
  16. dest:'dist/'
  17. }
  18. }
  19. })
  20. };

监听文件变化的插件:
先安装如下命令
插件:npm install grunt-contrib-watch --save-dev

  1. module.exports = function(grunt){
  2. //加载复制文件的插件
  3. grunt.loadNpmTasks('grunt-contrib-copy');
  4. //加载监听文件变化,文件发生变化执行指定的任务
  5. grunt.loadNpmTasks('grunt-contrib-watch');
  6. grunt.initConfig({
  7. watch: {
  8. html:{
  9. files: ['index.html'],
  10. tasks:['copy.html']
  11. }
  12. },
  13. copy: {
  14. html: {
  15. src: 'index.html',
  16. dest: 'dist/'
  17. },
  18. style: {
  19. src: 'stylesheets/*.css',
  20. dest: 'dist/'
  21. },
  22. js: {
  23. src:'javascript/**/*.js',
  24. dest:'dist/'
  25. }
  26. }
  27. })
  28. };

插件
创建服务器:grunt-contrib-connect
配置服务器
实时刷新:livereload
编译sass:grunt-contrib-sass
编译less:grunt-contrib-less
合并文件:grunt-contrib-concat
选项:options
最小化js:grunt-contrib-uglify
最小化css:grunt-contrib-cssmin
最小化图像:grunt-contrib-imagemin

......

安装插件的命令 sudo npm install xxxx --save-dev

配置服务器:

  1. module.exports = function(grunt){
  2. //加载复制文件的插件
  3. grunt.loadNpmTasks('grunt-contrib-copy');
  4. //加载监听文件变化,文件发生变化执行指定的任务
  5. grunt.loadNpmTasks('grunt-contrib-watch');
  6. grunt.loadNpmTasks('grunt-contrib-connect');
  7. grunt.initConfig({
  8. connect:{
  9. server:{
  10. options: {
  11. port:8000,
  12. base:'dist'
  13. }
  14. }
  15. },
  16. watch: {
  17. html:{
  18. files: ['index.html'],
  19. tasks:['copy.html']
  20. }
  21. },
  22. copy: {
  23. html: {
  24. src: 'index.html',
  25. dest: 'dist/'
  26. },
  27. style: {
  28. src: 'stylesheets/*.css',
  29. dest: 'dist/'
  30. },
  31. js: {
  32. src:'javascript/**/*.js',
  33. dest:'dist/'
  34. }
  35. }
  36. })
  37. };

grunt简记的更多相关文章

  1. 初学seaJs模块化开发,利用grunt打包,减少http请求

    原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...

  2. grunt配置任务

    这个指南解释了如何使用 Gruntfile 来为你的项目配置task.如果你还不知道 Gruntfile 是什么,请先阅读 快速入门 指南并看看这个Gruntfile 实例. Grunt配置 Grun ...

  3. 快速开发Grunt插件----压缩js模板

    前言 Grunt是一款前端构建工具,帮助我们自动化搭建前端工程.它可以实现自动对js.css.html文件的合并.压缩等一些列操作.Grunt有很多插件,每一款插件实现某个功能,你可以通过npm命名去 ...

  4. 是时候搁置Grunt,耍一耍gulp了

    也算是用了半年Grunt,几个月前也写过一篇它的入门文章(点此查看),不得不说它是前端项目的一个得力助手.不过技术工具跟语言一样日新月异,总会有更好用的新的东西把旧的拍死在沙滩上(当然Grunt肯定没 ...

  5. 应用Grunt自动化地优化你的项目前端

    在不久前我曾写了一篇 应用r.js来优化你的前端 的文章,为大家介绍了r.js这个实用工具,它可以很好地压缩.合并前端文件并打包整个项目.但是如果将r.js放到项目中,我们不得不顾及到一个问题——项目 ...

  6. RangePartitioner 实现简记

    摘要: 1.背景 2.rangeBounds 上边界数组源码走读 3.RangePartitioner的sketch 源码走读 4.determineBounds 源码走读 5.关于RangePart ...

  7. Grunt(页面静态引入的文件地址的改变探究)-V2.0

    相关插件的引用: grunt-usemin  对页面的操作 grunt-contrib-cssmin  压缩css load-grunt-tasks 瘦身gruntfile grunt-rev给md5 ...

  8. Grunt基本使用-V1.0

    浅语:grunt中文网:http://www.gruntjs.net/ 第一步:Grunt 依赖 Node.js 所以在安装之前确保你安装了 Node.js.然后开始安装 Grunt. 实际上,安装的 ...

  9. nodejs、npm、grunt——名词解释

    最近着手开发一个新项目,打算从工程化的角度整理一套自己的前端开发.发布体系. grunt这些工具,之前别人用我也用,并没有认真想过它们的前世今生,正好趁着这个机会,我来理一理目前业界比较流行这些工具的 ...

随机推荐

  1. Python数字、字符串

    1. 数字 byte 在python3中最重要的特性是对文本和二进制数据做了更加清晰的区分,python3不会以任意隐式方式混用字节型和字符型,也因此在python3中不能拼接字符串和字节包(pyth ...

  2. 【CCPC-Wannafly Winter Camp Day4 (Div1) H】命命命运(概率DP)

    点此看题面 大致题意: 有\(6\)个人玩大富翁,共有\(n\)块地,进行\(500\)轮,已知每个人掷骰子掷出\(1\sim6\)的概率.当某人到达一块未被占领的地时,他可以占领它.求最后每个人占有 ...

  3. 立体最短路径,广搜(POJ2251)

    题目链接:http://poj.org/problem?id=2251 参考了一下大神们的解法.也有用深搜的.然而,之前不久看到一句话,最短路径——BFS. 参考:http://blog.csdn.n ...

  4. DP上课覆盖知识点,POJ(1513)

    题目链接:http://poj.org/problem?id=1513 解题报告: 思路: 知识点从第二个开始扫,递推表达式是:minlec[i]=min(minlec[k])+1,并且要保证,tim ...

  5. android build.prop详解

    # begin build properties开始设置系统性能 # autogenerated by buildinfo.sh{通过设置形成系统信息} ro.build.id=MIUI(版本ID) ...

  6. Ajax的学习笔记(一)

    AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),ajax并不是一门单独的语言,而是一种技术,是指一种创建交互式网页应用的网页开发技术. ...

  7. 散度(Divergence)和旋度(Curl)

    原文链接 散度(Divergence) 散度的讨论应从向量和向量场说起.向量是数学中研究多维计算的基本概念.比如,速度可以分解为相互独立的分量,则速度就是一个多维的向量.假如空间中的每一个位置都有一个 ...

  8. 流形(Manifold)初步

    原文链接 欧几里得几何学(Euclidean Geometry) 两千三百年前,古希腊数学家欧几里得著成了<几何原本>,构建了被后世称为“欧几里得几何学”的研究图形的方法.欧几里得创立了当 ...

  9. wgan pytorch,pyvision, py-faster-rcnn等的安装使用

    因为最近在读gan的相关工作,wgan的工作不得不赞.于是直接去跑了一下wgan的代码. 原作者的wgan是在lsun上测试的,而且是基于pytorch和pyvision的,于是要装,但是由于我们一直 ...

  10. javascript入门笔记9-认识DOM

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 将HTML代码分 ...